为什么在服务器端,vue项目和.net webapi项目之间就出现了跨域问题,本地测试都好好的?

vue前端项目用的axios发送请求给.net core webapi。 在本地测试vue项目是localhost:8080,webapi运行的地址是…
关注者
5
被浏览
8,362

4 个回答

首先要明确一点:

你是用代理的方式实现跨域,还是用cors的方式实现跨域。

看你的截图,似乎两种都用了,但是本地起作用的是代理的方式。

然后远程服务器上似乎又没有设置代理。

所以,你想用哪种?

你这个配置思路从根本上来说就是有问题的。

首先,我先说说VUE配置跨域的问题,你在vue的配置文件里配置的跨域,仅仅只是在开发环境生效,因为本地DEV模式下运行的时候,这时候你的前端项目是有nodejs的服务端的,所以你配置的代理,nodejs会替你转发。但是在生产环境下,编译后的静态文件部署到服务端后是直接运行在用户浏览器端的,后端并没有nodejs给你兜底。所以配置文件里配置的代理仅仅是在开发环境下有效。所以正式环境下需要使用nginx来做代理解决跨域的问题。

其次,既然你已经使用nginx做代理转发,webapi就不需要进行跨域注册。服务端进行跨域注册,是你需要在浏览器端直连webapi的域名或者ip+端口,这时候才需要在服务端进行跨域注册,并在前端请求的时候做相应的配置(个人并不推荐这么做)。

所以,后端的跨域注册其实是无用功,生产环境下直接在nginx里配置把所有/api路由下的请求全部转发到webapi后端接口URL下即可,也无需在转发的时候设置add_header这个属性

不需要配置这个。