跨域问题原因及解决方法

跨域问题原因

如今前后端分离开发已经屡见不鲜，作为前端开发人员，肯定或多或少遇到过跨域问题。

其实跨域问题的本源是浏览器的同源策略限制，它是由网景公司提出的一个著名的安全策略，所谓同源是指"协议+域名+端口"三者相同，而同源策略是一种约定，现在所有支持 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

2. 新版本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详解。