VUE在Nginx下配置跨域访问

最新推荐文章于 2025-06-11 18:13:15 发布

山羊AM

最新推荐文章于 2025-06-11 18:13:15 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/m0_37603385/article/details/99696001

前端专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍如何在Nginx中配置API路径转发至后端服务器。通过修改conf/nginx.conf文件，加入特定location块，实现/api路径下请求的代理转发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打开nginx下conf/nginx.conf文件
找到server{}
加入

location /api {
	# 把 /api 路径下的请求转发给真正的后端服务器
	proxy_pass http://x.x.x.x:xxxx/;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

山羊AM

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue +nginx 解决跨域的问题

qq_36202485的博客

08-19

1073

记录一次在开发的时候遇到跨域问题技术栈：vue nginx 首先要弄清楚跨域的产生原因，请自行百度。清楚以后开始配置：再开发环境的时候不推荐后端去设置允许跨域。至于为什么，请自行百度。找度娘准没错的。。。首先，下载nginx-windowhttp://nginx.org/en/download.html 其次找到vue配置代理的地方： proxyTable: { ...

基于VUE3+VITE+SpringBoot+Nginx部署项目之跨域配置等问题

群鸿

06-27

1170

无斜杠 (：保留匹配到的location中的路径部分，并将其附加在代理目标的URL后面。有斜杠 (：忽略匹配到的location中的路径部分，直接将请求路径附加在代理目标的URL后面。至此，结文。鸣谢：chatGPT 陪伴产品开发的每一天。

2 条评论您还未登录，请先登录后发表或查看评论

nginx部署步骤，vue解决跨域

05-12

vue 跨域解决 Linux上部署nginx

Vue Nginx 配置跨域

title

03-25

2354

Vue跨域，nginx跨域，vite跨域

【实战指南】前端项目Nginx配置全流程：从打包部署到解决跨域/路由循环问题

花椒和蕊的博客

06-11

1215

nginx

vue中nginx配置跨域

john_QY的博客

11-13

1743

在vue.cofing.js中配置代理规则： module.exports = { // 开启代理服务器（方式一） // devServer: { // proxy: 'http' // }, // 开启代理服务器（方式二） devServer: { proxy: { '^/api': { // 匹配所有api开头的请求路径 target: 'http:localhost：8081', //代理目标的基础路径 pa..

nginx部署 vue配置代理服务器解决跨域问题

qq_42058998的博客

08-22

1815

nginx部署 vue配置代理服务器解决nginx代理服务器不奏效跨域问题

Vue中跨域及打包部署到nginx跨域设置方法

10-16

在当今的web开发过程中，...本文介绍了在Vue项目开发阶段使用webpack配置代理解决跨域的方法，以及在生产环境中如何配置Nginx服务器，确保前端项目在不同环境下都能够正常访问后端资源，保证前后端分离项目的顺利进行。

Vue跨域解决方案及Nginx部署跨域配置

最新发布

07-08

通常，我们会将打包后的文件（位于/dist目录）部署到Nginx服务器上，并通过Nginx配置代理来解决跨域。在生产环境中，可以通过Nginx来解决Vue项目的跨域问题。以下是Windows系统中设置Nginx的步骤：下载Nginx：访问...

VUE部署nginx解决跨域问题

m0_67402235的博客

06-18

1339

这是因为VUE在打包的过程中并没有把代理配置也进行打包，需要配置跨域代理，这里我使用的是服务器是nginx代理实现跨域问题。先去百度上下载一个nginx，然后进入conf目录，打开nginx.txt配置文件，找到如下配置转换到对应的服务器的配置跨域如下以上配置就可以解决跨域代理问题...

nginx解决vue跨域请求的问题

nibuyaoshiwang的博客

06-25

369

server { listen 9000 default_server; server_name localhost; root /opt/site_demo/dist; location /api { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTI

nginx设置代理解决跨域问题

liubangbo的专栏

07-09

1029

在浏览器中输入 localhost:8193 打开前端网页，但出现了后端接口请求跨域问题。原因是localhost:8193 和发送的后端请求192.168.1.128:8185 IP 和端口都不同，所以出现了跨域。这样打开前端网页的地址和请求后端接口的地址相同，浏览器就不会报跨域请求错误了。而接口通过nginx 又被转发到正确的后端接口地址，所以接口就能正常访问了。发送后端接口/file/get 会被转发到后端192.168.1.128:8151。

Nginx部署vue项目浏览器跨域，404，502解决

weixin_45384466的博客

11-10

3247

##2、所有得接口路径都加上/api/(可换做其他的)，我使用得是axios封装得。axios工具类中添加。###4、修改nginx得配置文件，nginx-1.24.0/conf/nginx.conf。上面的nginx中得所有注释使用 ”#“ 不是// 我是用//是因为写文章改的。###3、将打包文件拷贝到nginx得html文件下.###1、vue项目设置。

解决vue项目中前后端交互的跨域问题、nginx代理配置

upStar1的博客

07-28

4507

解决vue项目中前后端交互的跨域问题、nginx代理配置

阿里云部署 vue 项目后访问网页报 Referrer Policy: strict-origin-when-cross-origin

sinat_41780102的博客

09-20

1498

端口号被拦截导致的跨域问题处理

Vue--使用Nginx解决跨域问题

IT利刃出鞘的博客

11-09

4184

跨域其他网址 https://www.bookstack.cn/read/happy_book_vuejs/nginx_fix_cross_domain_problem.md

vue解决跨域之配置nginx

weixin_43885974的博客

01-09

2223

在开发环境下，可以在vue.config.js中配置对应的devServer配置代理服务解决跨域问题，但当打包后就无法使用vue自带的代理服务了，这时候需要借助nginx解决跨域问题。

Nginx反向代理解决Vue跨域问题

StoNENee的博客

04-04

7805

Nginx反向代理解决Vue跨域问题

vue反向代理解决跨域及部署nginx端口转发解决跨域

qq_38755190的博客

11-13

4566

发

nginx配置vue跨域

02-26

### 配置Nginx以支持Vue项目的跨域访问为了使 Vue 应用能够通过 Nginx 正常发起跨域请求，需在 Nginx 的配置文件中设置相应的 CORS 头。这可以通过编辑 `nginx.conf` 或者站点特定的 `.conf` 文件完成。 #### 修改Nginx配置文件在 HTTP 或 server 块内加入如下所示的配置： ```nginx server { listen 80; server_name localhost; location /api/ { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,BeginRequestTimestamp,Cookie,Content-Type'; if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; } proxy_pass http://backend_server_address; # 将此替换为目标服务器的实际地址 } } ``` 上述代码片段定义了一个名为 `/api/` 的路径前缀，任何以此开头的 URL 请求都将被转发给指定的目标服务器，并附带必要的 CORS 相关响应头[^1]。对于更复杂的场景，比如需要针对具体来源开放权限而不是通配符 (*) ，则应调整 `'Access-Control-Allow-Origin'` 的值为具体的 URI 。另外，在某些情况下可能还需要启用凭证共享功能（即 cookies 和其他认证信息），此时应在相应位置添加 `add_header 'Access-Control-Allow-Credentials' 'true';` 并确保前端也设置了正确的选项[^3]。 #### 测试更改后的配置保存修改并重启 Nginx 服务让新配置生效。之后可以从开发工具网络面板查看实际发出的预检 (Preflight) 及后续数据获取请求是否带有预期的 CORS 标记以及状态码是否正常[^4]。