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