虚拟主机中的Nginx配置存在CORS问题
我在部署 Vue 应用程序时在 Nginx 中遇到问题。
API在开发模式下工作正常,但是部署后出现CORS问题,因为我们的后端使用另一个构建在Windows服务器上的服务。(但是Nginx是在Linux和centos中构建的)
因此,我需要在Nginx上进行代理处理CORS问题,我调查了两天并使用了我所知道的,但CORS问题仍然存在,所以我希望有人能帮助我。
整个API URL是
https://rccht.cna.com.tw/globalviewAPI/api/globalview/GetVideoList
我用env编写API
${import.meta.env.VITE_CNA_API}/GetVideoList
生产环境为
/ gv-backend/globalviewAPI/api/globalview
``
Nginx 配置为
因为我们使用虚拟主机,Nginx运行两个Web应用程序,每个Web应用程序都有自己的名称,Nginx在根目录下有二级文件夹。
我不确定虚拟主机原因子文件夹是否影响 CORS,因此我尝试重写 Nginx 的 URL,但如您所知,它仍然不起作用。
请给我一些意见和建议,非常感谢。
I have problem in Nginx as I deployed my Vue application.
The API work normally in development mode, but have CORS problem after deploying, because our Backend-End use another service which was built on windows server.(But the Nginx was built in Linux with centos)
Therefore, I need to proxy on Nginx to handle CORS problem, I survey for two days and use whatever I know, but the CORS problem still exit, so I hope someone could help me.
The Entire API URL is
https://rccht.cna.com.tw/globalviewAPI/api/globalview/GetVideoList
I write API with env
${import.meta.env.VITE_CNA_API}/GetVideoList
The production env is
/gv-backend/globalviewAPI/api/globalview
``
The Nginx Config is
Because we use Vitual Host, the Nginx run two web applications, every web application have their own name, Nginx has second level folder under root.
I'm not sure if the Vitual Host cause subfolder affect the CORS or not, so I try to rewrite the URL for Nginx, but as you know, it still not work.
Please give me some advice and suggestion, thanks a lot.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
最后我自己找到了解决方案。
CORS问题是由Axios引起的预检请求。
预检请求条件可以参见这个。
因为 Axios 默认 Content-Type 是
application/json
,它触发了预检请求。因此,我不应该使用Nginx代理,好的解决方案是更改Axios的Content-Type。Finally, I found the solution by myself.
The CORS problem is preflight request which caused by Axios.
The preflight request conditions could see this.
Because the Axios default Content-Type was
application/json
, and it triggered the preflight request. Therefore, I shouldn't to use Nginx proxy, the good solution was change the Content-Type of Axios.