前端跨域解决方案

前后端分离开发给我带来很多的便利，无论是前端同学还是后端同学对于此种开发方式都是举双手赞成的。因为这样我们后端同学不用被css js这一大堆的前端代码折磨了，前端也不用改个样式要开个后台服务。虽然如此方便，但对于前端还是有些问题需要解决的。比如跨域问题，今天在项目中本地局域网测试移动端，手机浏览器打开会出现跨域（pc端跨域已通过chrome设置解决了）。

1.浏览器设置跨域

 在PC端开发，chrome浏览器是我们前端必不可少的开发工具，用chrome解决跨域简单粗暴。

1)右键chrome选择属性

2）选择快捷方式

3)在目标后面空格 加上 --disable-web-security --user-data-dir=C:\(--user-data-dir是自定义目录)

打开浏览器，轻松解决跨域问题

2.vue配置文件设置代理

在用vue-cli3构建的前端项目中有vue.config.js文件，在其中添加如下代码

devServer: {   proxy: {        '/apis': {    //将www.example.com映射为/apis
            target: 'https://www.example.com',  // 接口域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/apis': ''   //需要rewrite的,
            }              
        }
  }}

详情请参考文章

3.后台设置允许跨域

 这种方法是我认为最方便的方法，由服务器决定是否允许跨域，如果允许，服务器会在响应头中设置字段来告诉浏览此次请求合法，则浏览器不会将请求包丢弃，从而完成跨域。再次举个nodejs服务器的栗子：

//设置跨域访问
app.all('*',function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (req.method == 'OPTIONS') {
        res.send(200); /让options请求快速返回/
    }
    else {
        next();
    }
});

4.设置服务器代理（此处只给出实现方案）

  此种方法适用于适应多平台的大型项目，这种方式实际就是将前端ajax请求的地址通过服务器访问。前端代码运行在nodejs中层层的服务器上，nodejd只负责运行前端代码和转发前端请求。例如example.org/index 页面需要访问api.test.com/getNews 来获取最新新闻，我们可以通过在example.org的服务器上面多增加一个接口 kangbiao.org/api?url=api.weibo.com/getNews ，然后再服务器内部，该接口所做的事情就是向api.weibo.com/getNews 发起请求即可，然后将结果返回。

这种方式如果是单类平台不建议使用，维护成本比较高。