通过vue dev和nginx反向代理实现跨域

2,076 阅读1分钟

一、在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_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;
    }  

代码不用变,结果ok,

还有一篇文章可以参考: www.cnblogs.com/xiaoxiaossr…