解决前端开发环境中的的跨域问题

福州老谢 發表於 2019-6-25 12:09:00

解决前端开发环境中的的跨域问题

一、为什么会有跨越问题 是客户端浏览器同源策略导致的，就是浏览器不允许不同源的站点相互访问。试想一下要是没有这个，那站点里的安全信息如cookie，账号/密码等是不是很容易被其它站点获取。 二、解决思路 知道是客户端浏览器为了安全使用同源策略导致的，而服务端是没有这个限制的，那我们就只能通过服务端进行跨域了。不管是jsonp,core，还是代理的方式，都是需要服务配合的。哈哈，这也是为啥后端和生产环境下比较少听说跨域的问题，所以这里介绍前端开发环境中的几种解决方法。 三、解决方案 1.完全交予后端解决，配值请求头信息（core），前端什么都不用做,如express.js中配置如下，其它后端语言配置同理
<div class="cnblogs_code">
<pre>app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",'3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});</pre>
</div>
2.使用nginx反向代理，在配置文件nginx.conf中找到server{}对象，更改项目地址root和配置代理地址proxy_pass，这个方法适合前端静态文件使用：
<div class="cnblogs_code">
<pre>location / {
root D:/browseClient/dist;#自己的前端项目地址
indexindex.html index.htm;
}
#解决跨域
location /api { # 自定义nginx接口前缀
proxy_pass http://127.0.0.1:3000; # 后台api接口地址
 proxy_redirect default;
#设置主机头和客户端真实地址，以便服务器获取客户端真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}</pre>
</div>
3.如果使用vue-cli搭建的项目，可以直接使用proxyTable模块，项目框架已经集成，找到配置文件在/confif/index.j，如下配置
<div class="cnblogs_code">
<pre>//代理配置表，在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
"/adv":{
 target:"http://127.0.0.1:3000",//需要访问的服务器地址
 changeOrigin:true,//true为开启代理
 pathRewrite:{
 '^/adv': '/'//路径的替换规则
 }
}，
"/user":{
 target:"http://127.0.0.1:3000",//访问的服务器地址
 changeOrigin:true,//true为开启代理
 pathRewrite:{
 '^/user': '/'//路径的替换规则
 }
}
}</pre>
</div>
显然，大部分情况我们不可能为每个api接口都在这加一个规则，所以更好的配置是：
<div class="cnblogs_code">
<pre>proxyTable: {
'**': {
 target: 'http://127.0.0.1:3000',
 changeOrigin: true, //允许跨域
 }
}</pre>
</div>
或者
<div class="cnblogs_code">
<pre>proxyTable: [{
context: ['/**']，
target: 'http://127.0.0.1:3000'，
changeOrigin: true,//允许跨域
}]</pre>
</div>
是不是方便了很多 4.其它，如jsonp是通过接口回调的方式实现跨域，这个现在已经用的少了。window.postMessage() 是HTML5的一个接口，专注实现不同窗口不同页面的跨域通讯。这些是对单个接口或者页面层面的跨域，使用也简单就不详细说了。
 
关注公众号“云海生活”获取更多技术分享
<img src="http://www.liuminghai.com/staticSide/upload/41078e0f6f38e873897d5e672be305d9.jpg"> 
来源：https://www.cnblogs.com/paul123/p/11082101.html

頁: [1]

琼殿技术论坛's Archiver

解决前端开发环境中的的跨域问题