Nginx 跨域支持解决put和delete请求报错

使用nginx作为跨域工具,在使用put和delete请求时会遇到报错,经过和后台沟通,是这两种请求会在真真的请求之前有一次OPTIONS请求,所以我们拦截OPTIONS请求直接返回200;

配置文件代码

if ($request_method = 'OPTIONS') {

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;

                                  #支持put和delete请求

return 200;

}

以下是全部的nginx【配置文件】,本人菜鸟欢迎交流

#user nobody;

worker_processes 1;

 

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

 

#pid logs/nginx.pid;

 

 

 

events {

worker_connections 1024;

}

 

http {

include mime.types;

default_type application/octet-stream;

 

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '

# '$status $body_bytes_sent "$http_referer" '

# '"$http_user_agent" "$http_x_forwarded_for"';

 

#access_log logs/access.log main;

 

sendfile on;

#tcp_nopush on;

 

#keepalive_timeout 0;

keepalive_timeout 65;

 

#gzip on;

 

server {

listen 8182;

server_name localhost;

#charset koi8-r;

 

#access_log logs/host.access.log main;

add_header Access-Control-Allow-Origin * always;

add_header Access-Control-Allow-Headers Authorization,X-Requested-With,Content-Type,Access-Token always;

add_header Access-Control-Allow-Methods * always;

location / {

if ($request_method = 'OPTIONS') {

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;

                                  #支持put和delete请求

return 200;

}

proxy_pass http://;

}

error_page 404 /404.html;

error_page 403 /403.html;

# redirect server error pages to the static page /50x.html

#

error_page 500 502 503 504 403 /50x.html;

location = /50x.html {

root html;

}

 

# proxy the PHP scripts to Apache listening on 127.0.0.1:80

#

#location ~ \.php$ {

# proxy_pass http://127.0.0.1;

#}

 

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

#

#location ~ \.php$ {

# root html;

# fastcgi_pass 127.0.0.1:9000;

# fastcgi_index index.php;

# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;

# include fastcgi_params;

#}

 

# deny access to .htaccess files, if Apache's document root

# concurs with nginx's one

#

#location ~ /\.ht {

# deny all;

#}

}

 

server {

listen 8183;

server_name localhost;

 

#charset koi8-r;

 

#access_log logs/host.access.log main;

add_header 'Access-Control-Allow-Origin' '*';

location / {

proxy_pass http://192.168.31.130:8080;

proxy_redirect default ;

}

location ~ \.html$ {

proxy_pass http://127.0.0.1:8080;

proxy_redirect default ;

}

#error_page 404 /404.html;

 

# redirect server error pages to the static page /50x.html

#

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

 

# proxy the PHP scripts to Apache listening on 127.0.0.1:80

#

#location ~ \.php$ {

# proxy_pass http://127.0.0.1;

#}

 

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

#

#location ~ \.php$ {

# root html;

# fastcgi_pass 127.0.0.1:9000;

# fastcgi_index index.php;

# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;

# include fastcgi_params;

#}

 

# deny access to .htaccess files, if Apache's document root

# concurs with nginx's one

#

#location ~ /\.ht {

# deny all;

#}

}

 

# another virtual host using mix of IP-, name-, and port-based configuration

#

#server {

# listen 8000;

# listen somename:8888;

# server_name somename alias another.alias;

 

# location / {

# root html;

# index index.html index.htm;

# }

#}

 

 

# HTTPS server

#

#server {

# listen 443 ssl;

# server_name localhost;

 

# ssl_certificate cert.pem;

# ssl_certificate_key cert.key;

 

# ssl_session_cache shared:SSL:1m;

# ssl_session_timeout 5m;

 

# ssl_ciphers HIGH:!aNULL:!MD5;

# ssl_prefer_server_ciphers on;

 

# location / {

# root html;

# index index.html index.htm;

# }

#}

 

}

 

<think>好的,我需要回答用户关于如何使用Nginx配置前后端分离架构的问题。首先,我得回忆一下前后端分离的基本概念。前后端分离通常是指前端后端独立开发,通过API进行通信。Nginx在这里的作用主要是作为反向代理静态资源服务器。 根据用户提供的引用资料,引用[1]提到前端通过Nginx提供静态资源,后端API通过Nginx代理转发。引用[2]则讨论了使用Postman测试接口API设计规范,这可能对调试有帮助。我需要结合这些信息来构建配置步骤。 首先,用户需要安装Nginx,这是基础步骤。然后,配置静态资源服务,让Nginx托管前端文件,比如HTML、JS、CSS。接下来,设置反向代理,将API请求转发到后端服务器,比如Spring Boot应用。还要考虑问题,可能需要添加CORS头。负载均衡如果有多个后端实例的话,可以用upstream模块。最后,重启Nginx并测试配置是否正确。 需要注意的点包括路径是否正确、代理地址是否准确、是否需要HTTPS等。另外,用户可能想知道如何验证配置是否生效,可以建议使用Postman测试接口,如引用[2]提到的,快速定位问题。 可能的相关问题包括如何优化Nginx配置、如何处理静态缓存、如何结合HTTPS部署。这些可以作为相关问题列出,帮助用户进一步探索。</think>### 如何配置Nginx实现前后端分离架构? 以下是分步配置指南,结合Nginx的反向代理与静态资源托管能力实现前后端分离: --- #### **1. 基础架构理解** - **前端**:使用框架(如Vue.js/React)打包生成的静态文件(HTML/CSS/JS),需托管在Nginx服务器。 - **后端**:提供RESTful API的服务(如Spring Boot/Django),通过Nginx反向代理对外暴露接口。 --- #### **2. Nginx配置步骤** ##### **步骤1:安装Nginx** ```bash # Ubuntu/Debian sudo apt update && sudo apt install nginx # CentOS sudo yum install nginx ``` ##### **步骤2:配置前端静态资源** 1. 将前端构建产物(如`dist`目录)上传至服务器,例如`/var/www/frontend`。 2. 在Nginx配置文件中添加静态资源服务: ```nginx server { listen 80; server_name example.com; # 静态文件托管 location / { root /var/www/frontend; index index.html; try_files $uri $uri/ /index.html; # 支持前端路由(如Vue Router) } } ``` ##### **步骤3:配置后端API反向代理** ```nginx server { # ...(同上监听配置) # API代理配置 location /api/ { proxy_pass http://backend_server; # 后端服务地址(如Spring Boot的8080端口) proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 可选:配置(若后端未处理CORS) add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; } } # 定义后端服务地址(支持负载均衡) upstream backend_server { server 127.0.0.1:8080; # 单节点示例 # server 192.168.1.2:8080 weight=3; # 多节点权重分配 } ``` ##### **步骤4:重载Nginx配置** ```bash sudo nginx -t # 验证配置语法 sudo nginx -s reload ``` --- #### **3. 关键配置说明** - **静态资源路径**:确保`root`指向正确的前端构建目录[^1]。 - **路由兼容性**:`try_files`确保前端路由刷新不报404。 - **代理转发**:`proxy_pass`将`/api/`开头的请求转发至后端服务[^1]。 - **处理**:若后端已配置CORS,可省略Nginx的`add_header`指令[^2]。 --- #### **4. 验证配置** 1. **前端访问**:浏览器打开`http://example.com`,确认页面加载正常。 2. **接口测试**:使用Postman发送请求至`http://example.com/api/user`,检查是否返回后端数据[^2]。 --- #### **5. 扩展优化建议** - **HTTPS支持**:通过Let's Encrypt配置SSL证书。 - **缓存控制**:为静态资源添加缓存头: ```nginx location /assets/ { expires 1y; add_header Cache-Control "public"; } ``` - **日志监控**:配置访问日志与错误日志路径,便于故障排查。 --- 相关问题
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值