Nginx解决前端调用API时的跨域问题

    目前很多网站都是用前后端完全分离的模式实现,即:后端通过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!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值