Vue跨域神坑

玛德，这个跨域真搞死了，搞得我都想放弃了，网上查找，大部分全都是复制的一些，没个卵用的，最后找到了一个详细的

本地反向代理方法，解决跨域问题，

上线的话，在服务器端，也用反向代理，

目前看来，就反向代理这个更简单方便一下吧，

但是再没弄过的情况下，要捣鼓很久，这一系列问题才搞定...

先说，本地反向代理

在本地测试环境下

项目目录下\config\index.js

打开index.js文件

里面找到 这个 proxyTable: {}

假如api json 数据地址在 api.blyoo.com/json.json

本地localhost:8080地址访问api.blyoo.com则出现跨域，

在文件里面添加以下

 proxyTable: {
        //这是算是为了区分吧 例如 访问 localhost:8080/api  则  其实访问的是 api.blyoo.com/api  
        '/api':{
            target:'http://api.blyoo.com',
            changeOrigin:true,

//路径重写 访问 localhost:8080/api   访问的是   api.blyoo.com
//例如  访问localhost:8080/api/json.json    则访问的是 api.blyoo.com/json.json

            pathRewrite:{
                '^/api':''
            }
        }
	},

然后保存，重启 npm run dev

项目里 获取数据则 这样写 axios.get('/api/json.json')

真实访问地址其实是api.blyoo.com/json.json

上线的话，最好也用反向代理，就在服务器端配置文件里配置一下conf

反向代理到api域名地址

此为nginx配置

最好就是使用二级目录 例如下面的/api/

这样不影响本身网页内容，如果用一级目录就会出问题，

 location /api/
    {
       
         proxy_pass http://api.blyoo.com;
}

例如我项目地址 test.blyoo.com

访问test.blyoo.com/api/ 则反向代理到了 http://api.blyoo.com