Nginx解决前端调用API时的跨域问题
来源:互联网 发布:中国石油进出口数据 编辑:程序博客网 时间:2024/05/21 07:10
目前很多网站都是用前后端完全分离的模式实现,即:后端通过API提供数据,前端使用API获取数据并渲染。不过这样做会存在API跨域的问题,这里介绍一种通过Nginx配置解决跨域问题的方法。
Nginx整体配置如下:
upstream service {
server 127.0.0.1:8080;
}
map $http_origin $cors_header {
default "";
"~^https?://localhost(:[0-9]+)?$" "$http_origin";
}
server {
listen 80;
server_name 127.0.0.1;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location = /favicon.ico { deny all; error_log off; access_log off; log_not_found off; }
location /api/ {
if ($request_method = 'OPTIONS') {
add_header 'Content-Length' 0 always;
add_header 'Content-Type' 'text/plain charset=UTF-8' always;
add_header 'Access-Control-Allow-Origin' '$cors_header' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;
return 200;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '$cors_header' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '$cors_header' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
}
uwsgi_pass service;
include uwsgi_params;
}
}
其中,"map $http_origin $cors_header"将需要跨域的域名或者IP解析出来,方便后面的配置处理。
API路径配置中的 "X-AUTH-USER, X-AUTH-TOKEN",是API中传递的自定义HEADER,需要在 "Access-Control-Allow-Headers"中指明。
Over!
Nginx整体配置如下:
upstream service {
server 127.0.0.1:8080;
}
map $http_origin $cors_header {
default "";
"~^https?://localhost(:[0-9]+)?$" "$http_origin";
}
server {
listen 80;
server_name 127.0.0.1;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location = /favicon.ico { deny all; error_log off; access_log off; log_not_found off; }
location /api/ {
if ($request_method = 'OPTIONS') {
add_header 'Content-Length' 0 always;
add_header 'Content-Type' 'text/plain charset=UTF-8' always;
add_header 'Access-Control-Allow-Origin' '$cors_header' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;
return 200;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '$cors_header' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '$cors_header' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Origin,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Accept,Cookie,Set-Cookie, X-AUTH-USER, X-AUTH-TOKEN' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
}
uwsgi_pass service;
include uwsgi_params;
}
}
其中,"map $http_origin $cors_header"将需要跨域的域名或者IP解析出来,方便后面的配置处理。
API路径配置中的 "X-AUTH-USER, X-AUTH-TOKEN",是API中传递的自定义HEADER,需要在 "Access-Control-Allow-Headers"中指明。
Over!
0 0
- Nginx解决前端调用API时的跨域问题
- nginx解决前端跨域问题
- 前端开发接口联调--用nginx的反向代理机制解决前端跨域问题
- nginx反向代理-解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 用nginx的反向代理机制解决前端跨域问题
- 前端跨域问题的解决
- nginx解决前端跨域配置
- 配置nginx反向代理服务器,解决浏览器跨域调用接口的限制问题
- 前端解决跨域问题
- 前端接口调试 -- 通过Nginx反向代理机制解决跨域问题
- nginx 解决跨域问题
- nginx解决跨域问题
- 初识app之产品需求分析文档设计
- zabbix客户端部署
- Mac下IDEA的使用之常用快捷键篇
- dubbo + zookeeper + spring 分布式系统(二)
- mysql事务隔离级别
- Nginx解决前端调用API时的跨域问题
- 并发编程一
- 合并bootloader和app的bin文件
- Android 测试数据格式
- Spring 拦截器的使用
- IOS开发模块总结(一)本地数据存储7 NSKeyedArchiver归档
- 用大数据预测农业趋势获百万美元融资【智库2861】
- java树结构
- 顺序表排重