前后端分离：使用Nginx实现跨域访问

parroly

已于 2023-07-08 00:32:01 修改

阅读量966

点赞数 1

分类专栏：后端文章标签： nginx

于 2023-02-11 15:59:22 首次发布

本文链接：https://blog.csdn.net/sinat_37623490/article/details/128984497

版权

本文介绍了在前后端分离的项目中，由于同源策略导致的跨域问题。通过使用Nginx作为代理，解决了GET请求的跨域问题，但POST请求因Content-Type为application/json而触发CORS预检请求，导致403错误。通过调整Nginx配置，确保Origin与代理目标域名相同，从而成功处理了POST请求的跨域访问。

摘要由CSDN通过智能技术生成

项目背景

Spring Boot搭建后端，启动在本地8082端口；VUE搭建前端，启动在本地8080端口。
前端请求直接访问后端接口，会报错：

Access to XMLHttpRequest at 'http://localhost:8082/api/user' from origin 
'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是浏览器的同源策略：只有在地址的协议、ip、端口都一样情况下(同源)，才允许进行资源互访。若在不同源的情况下访问，就称为跨域。

使用nginx代理请求

安装nginx并启动在8081端口，对8081端口监听配置如下：

# resolve CORS problem
server {
   
   listen      8081;
   server_name localhost;

    proxy_set_header Cookie $http_cookie;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;