通过vue dev和nginx反向代理实现跨域
一、在vue的开发环境中跨域1、在config目录找到index.js文件2、如图配置,比如使用百度翻译api,那么这样写的实际使用等于访问http://fanyi.baidu.com/v2transapi/api?+参数yarn run dev之后在地址栏输入http://localhost:8080/api?from=zh&to=jp&query=爱&simple_means_......
·
一、在vue的开发环境中跨域
vue-cli5
官方文档
找到vue.config.js
。
devServer: {
proxy: {
'/api': {
target: 'http://fanyi.baidu.com/v2transapi/api',//代理目标
changeOrigin: true,
},
},
},
如上配置,比如使用百度翻译api,那么这样写的实际使用等于访问
http://fanyi.baidu.com/v2transapi/api?+参数
npm run dev
之后请求http://localhost:8080/api?from=zh&to=jp&query=爱&simple_means_flag=3
相当于http://fanyi.baidu.com/v2transapi/api?from=zh&to=jp&query=爱&simple_means_flag=3
二、在生产环境中跨域
设置nginx配置文件:
location /api {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://fanyi.baidu.com/v2transapi;
}
代理本机端口
location /api2 {
proxy_pass http://localhost:9001/;
}
代码不用变,结果ok,
更多推荐
已为社区贡献9条内容
所有评论(0)