前后端分离后开发阶段跨域问题处理

前后端分离之后，开发阶段接口联调就会出现ajax跨域问题。
当然，跨域问题的解决方案还是挺多的，这里梳理下我接触到的几种方案。

一、禁用Chrome的同源策略

目测这是最简单粗暴的方案

可以通过使用Chrome命令行启动参数来改变Chrome浏览器的设置。
这里使用的是disable-web-security参数，这个参数可以降低Chrome浏览器的安全性，禁用同源策略。要支持跨域，还需要加上user-data-dir。

下面以Windows为例。
1.先关闭所有的Chrome窗口。
2.新建一个Chrome快捷方式，右击->属性->快捷方式。
3.在目标(T)中设置参数：

--args --disable-web-security --user-data-dir

4.点击应用/确定，以这个快捷方式打开Chrome浏览器，效果如下：

二、webpack-dev-server代理

devServer: {
    ...
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:8080',
            pathRewrite: {'^/api': '/api/v1'}
        }
    }
}

将 '/api' 通过本地开发服务器webpack-dev-server转发到 'http://127.0.0.1:8080'，即转发到后端服务。pathRewrite用于路径转换，具体取决于你请求的uri与后端服务实际uri的差异，比如你本地起的80端口，你的uri为 'http://localhost/api'，将为转换成 'http://127.0.0.1:8080/api/v1'。
详细配置请移步 webpack devServer。

三、nginx反向代理

http {
    ...
    server {
        ...
        location /api/ {
            proxy_pass http://127.0.0.1:8080
        }
    }
}

四、后端实现CORS接口

CORS需要浏览器和服务器同时支持。目前所有现代浏览器都支持该功能，IE浏览器不能低于IE10。
对于前端开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。

后端实现CORS接口只需合理设置Response Header，以node为例：

const express = require('express');
let app = express();
app.all('*', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
    next();
});
...