Vue-cli2.0/vue-cli3.0解决跨域

Vue如何解决跨域问题

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’

这个是在使用Vue中的axios请求数据的时候报的跨域，本来这个只需要后台在nginx服务中配置请求头信息问题可以很轻松解决的，

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET,POST';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

但是其实前端也可以轻松解决的
我看到网上有的说配置没用，接下里分情况讲解一下。

vue2.0这个版本的配置是在 config/index.js

步骤一 找到config下的index.js

dev: {
		//省略其他配置信息
        proxyTable: {  //设置代理路径
            '/api': {
                target: 'http://liveuser.com',//请求api:端口号 或者是 已上线的接口地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        },
  }

步骤二 建一个用来封装axios的proxy.js文件（文件名随意，文件放哪都行，后面引入路劲正确即可）

import axios from "axios"    //引入axios
const instance = axios.create({   //建参  传相关配置
    timeout: 10000,
    headers: {   
        'Content-Type': "application/json;charset=utf-8"
    }
});
export default {   //跨域请求的接口
    getInfo(data) {   //data是到时候要传的参数
        return instance.get('get-rooms', data);  //请求的接口地址就是http://liveuser.com/get-rooms 之前已经设置好target: 'http://liveuser.com',
    }
};

步骤三 在main.js(项目入口文件) 加入配置

import instance_ from "./router/proxy"   //引入刚刚创建的  proxy.js  文件
Vue.prototype.instance = instance_ //  通过在 原型 上定义axios实例  使其在每个Vue实例中可用

步骤四 开始调用接口

this.instance.getInfo({    //随便在一个组件中调用已经配置好的接口 getInfo
                params: { page: 1 },      //我这个接口是get请求并且需要传入page参数    没有就不传  
            }).then(()=>{
                console.log("请求成功")
            }).catch(()=>{
                console.log("请求失败")
            })

步骤五 重启项目 （npm run dev ）
以上就完成了一个前端解决跨域请求的基本步骤

Vue3.0配置稍微有点改动

首先 vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建，然后加入如下配置

let proxyObj = {};
proxyObj['/']={  // 用 ‘ / ’ 的目的是接口地址全部拼接http://liveuser.com/    可以自己定义
    ws:false,
    target:'http://liveuser.com',
    changeOrigin:true,
    pathRewrite:{
        '^/':''
    }
};

module.exports = {
	    devServer: {
	     	//省略其他配置
	        proxy:proxyObj
    },
}

其他步骤和上面Vue2.0一致。
这样Vue中基本的跨域问题就可以解决，希望可以帮助到你