vue项目打包部署nginx跨域

vue项目打包部署nginx跨域

vue项目连接外部api接口时，打包部署到nginx后出现api404，api跨域问题，这个时候需要给vue项目本身进行跨域，再配置nginx中进行跨域即可解决，详见下文。

1. 首先给vue项目加上跨域【使用外部api时】

在vue项目中index.js文件中加上代理操作。

这里的【target】是我们需要跨域的api路径（接口路径），下面的【"^api"】直接为空。

上图为 我自己添加的【test.env.js】配置文件，主要在测试环境使用，这里直接把 API_HOST 替换为【’"/api"’】,注意是单引号-------双引号。

到此，我们vue项目中的代理就已经做好了。

2. 在nginx.conf中配置代理

在nginx文件夹中有一个conf文件夹，打开后进行编辑nginx.conf配置文件。

进行添加此配置，proxy_pass http://*********；这里需要注意【proxy_pass后面有一个空格】。

注意：如果报【nginx: [emerg] unknown directive “?” in /usr/local/nginx/conf/nginx.conf:2】此错误，请检查nginx.conf的格式是否是UTF-8。

3. 重启nginx

进入 nginx 文件夹中的 sbin 文件中执行【./nginx -s reload】命令即可。

如有其他疑问，可以在下方评论区留言，一起解决。