前端利用代理解决跨域问题

场景

前端:‘后端朋友,你那接口我访问不了,你设置下那个access-control-follow-origin?’
后端:'不要啦,那样容易会被CSRF攻击的啦,又不是测试服的接口,安全很重要的'

遇到这个问题,后端又不想配合你搞搞jsonp(其实也没必要,还真的浪费时间),肯定就要用 代理啦!

代理分为正向代理跟反向代理

正文

今天要讲的是利用fiddler这个软件实现正向代理。

我们新建一个index.html文件,然后该文件里引用js:

$.ajax({
        url: 'http://vote.sina.com.cn/api/survey/vote_status/240',
        method: "POST",
        data: {
            t: 1520434311162
        },
        success: function (data) {
            console.log(data);
        },
})

这个url是我在新浪首页随便找的,一运行index.html就会提示跨越问题:

XMLHttpRequest cannot load http://vote.sina.com.cn/api/survey/vote_status/240. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这时候fiddler就出场了,
打开该软件(其实谷歌浏览器也可以设置代理,原理一样,但我没试过。。。)

1.选择AutoResponder选择卡
2.勾上Enable rules
3.勾上Unmatched requests passthrough
4.填上 http://www.sina.com.cn
5.填上 index.html的路径(注意是文件路径,跟浏览器里路径的最大区别是‘/’跟‘\’)
6.点击有点的save按钮
好了,现在浏览器里输入http://www.sina.com.cn ,咋们不会跳到新浪首页,而会访问你那个index.html文件,然后在操作台可以看得请求的到数据了。

反向代理下次再聊,我知道webpack里可轻松设置,利用express服务端请求接口不存在跨域这个原理。
如果理解有误,欢迎指正。~

参考文章:
前端开发如何独立解决跨域问题
如何使用Fiddler实现跨域访问(把自己做的静态HTML页面域名变成api.bing.com)

发表评论

电子邮件地址不会被公开。 必填项已用*标注