解决Vue生产环境中的跨域问题
一个项目中用到了Vue,在开发环境中,跨域调接口,很容易就实现了。但是打包了,访问Vue项目发现调用接口的地方,报404了,找不到接口,我就一直在网上找原因。最后得知,网上一致认为,Vue的生产环境与开发环境的跨域解决方法是不一样的,最后我还是相信了。不多说了,说解决方案。(本文是作者原创,转发请标明出处)我采用了nginx来部署Vue项目。接口让Nginx配置一个与开发环境一致的访问路径...
一个项目中用到了Vue,在开发环境中,跨域调接口,很容易就实现了。但是打包了,访问Vue项目发现调用接口的地方,报404了,找不到接口,我就一直在网上找原因。最后得知,网上一致认为,Vue的生产环境与开发环境的跨域解决方法是不一样的,最后我还是相信了。不多说了,说解决方案。(本文是作者原创,转发请标明出处)
我采用了nginx来部署Vue项目。
接口让Nginx配置一个与开发环境一致的访问路径,并代理到你的后台发在的服务器。
这里说的路径是说的“apis/"或者”api“。
直接上代码比较清楚一些。
Nginx的配置:
server{
listen 81;#Vue项目的访问地址
server_name localhost;
access_log logs/host.access.log main;
location / {
root html/dist;
index index.html;
}
location /apis/ {#这里是核心,与开发环境中代理路径一定要保持一致
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://localhost:8080/;#后台的接口
}
}
Vue项目的创建,打包就不在这里说了,相信能 遇到这个问题的创建项目,打包已经不是问题了。
亲测,完美解决。
更多推荐
所有评论(0)