虚拟主机中的Nginx配置存在CORS问题

发布于 2025-01-10 01:41:10 字数 1231 浏览 0 评论 0原文

我在部署 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

enter image description here

The production env is

/gv-backend/globalviewAPI/api/globalview

enter image description here

``

The Nginx Config is

enter image description here

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.

enter image description here

Please give me some advice and suggestion, thanks a lot.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

灰色世界里的红玫瑰 2025-01-17 01:41:10

最后我自己找到了解决方案。

CORS问题是由Axios引起的预检请求

预检请求条件可以参见这个

因为 Axios 默认 Content-Typeapplication/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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文