跨域问题原因
如今前后端分离开发已经屡见不鲜,作为前端开发人员,肯定或多或少遇到过跨域问题。
其实跨域问题的本源是浏览器的同源策略限制,它是由网景公司提出的一个著名的安全策略,所谓同源是指"协议+域名+端口"三者相同,而同源策略是一种约定,现在所有支持 JavaScript 的浏览器都会使用这个策略。
四种解决方法
我用过四种方式解决过跨域问题,解决跨域的方法主要分为浏览器端解决跨域问题和服务端解决(服务端通信一般不存在跨域问题)
1.使用proxyTable
proxyTable是vue-cli提供的解决vue脚手架开发环境下跨域问题的策略,这可以说是一种服务端通信解决跨域的方法。proxyTable本质上是在底层启动了一个服务,它使用http-proxy-middleware中间件来进行代理转发,其他如react可自行查阅。
具体做法跟网上说的一样,在config/index.js下配置
proxyTable: {
'/apis': {
target: 'http://ceshi:8000/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //用空字符串重写,
}
}
}
这样如果请求/apis/xxx实际上就会去请求http://ceshi:8000/xxx
2.使用nginx进行代理转发
该方法的原理和proxyTable类似,主要适用于传统html+css+js且ajax请求接口较少的情况,实现方法很简单,使用nginx部署工程并给接口配置转发代理,然后启动nginx服务,主要代码如下,具体可以自行百度:
upstream my_server {
server x.x.x.x:8080;
keepalive 2000;
}
server {
listen 80;
server_name x.x.x.x;
client_max_body_size 1024M;
location /api/ {
proxy_pass http://xxxxxx/xxxxx;
proxy_set_header Host $host:$server_port;
}
}
3.使用浏览器配置跨域
这是浏览器解决跨域的一种方法,一般适用于html+css+js的传统PC前端开发。以谷歌为例,可以
1.新建快捷方式,在目标那里的路径后面跟上如下参数
“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --disable-web-security
- 新版本chrome 49+需要设置user-data-dir
例如改为"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\MyChromeDevUserData
4.使用CORS进行跨域资源共享
与以上三种方法不同的是,CORS需要浏览器和服务端进行配合。具体可见
cors详解。