vue-cli3构建项目跨域解决方案

    先后端分离开发给我带来不少的便利，不管是前端同窗仍是后端同窗对于此种开发方式都是举双手同意的。由于这样咱们后端同窗不用被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 发起请求便可，而后将结果返回。

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