正确配置Access-Control-Allow-Origin,千万不要设置成*

随着前后台架构的兴起,以及各种小程序、客户端等异地前端的部署架构,相信大家都经常会遇到CORS问题,CORS问题会阻止后台数据的正常返回,如果你搜索相关错误,你会遇到很多教程,教你修改Access-Control-Allow-Origin,解决CORS问题。

那这里我要多说一句,如果搜到的方案是让你把Access-Control-Allow-Origin配置成*,请不要这么做,至少在生产环境不要这么做。

Access-Control-Allow-Origin配置成*什么意思?意思是允许任意网站跨域访问该服务端口,在这种情况下,任意一个前端程序都可以随意集成该端口内容,实现数据获取。

那正确的方法是什么呢?应该配置成为你允许的网站。例如百家饭的域名是rongapi.cn,访问方式是https,那就应该是https://rongapi.cn/,最保险的获取该地址的方式是打开你的前端调试窗口,查看任意网络请求中标头里面origin的内容,如下图,请注意,有些地方会说要用referer的值,但是从下图我们可以看出,origin这个值和referer的值是不同的。

 那我们拿到这个origin的值,配置到Access-Control-Allow-Origin里面是完全没有问题的。

配置Access-Control-Allow-Origin的方法

配置Access-Control-Allow-Origin的地点可以有很多,在通常的负载均衡-Web服务器架构中,我们推荐可以在nginx配置中完成该配置。配置方法是在server段内或者location段内,添加

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

注意,配置成多域名不可以

那如果我们的业务域名是多个域名应该怎么办呢,我们在搜索该解决方案的时候,有时候会遇到有方案讲,把多个域名同时添加到header里面,但是这个方案经测试已经过期或者不是一个正确方案。

正确的nginx配置方式是先测试http_origin是否符合要求,如果符合,将用户传入的http_origin填入中。

例如

location / {
    if ($http_origin ~* "^https?://(rongapi.cn|www.rongapi.cn)$") {
        add_header Access-Control-Allow-Origin "$http_origin";
    }
}

这里用的是正则表达式,当然直接使用=或者!=比较字符串也可以。

其他CORS常见的错误

post出错,get不出错

大量现代浏览器似乎会在post之前传输一个options来确认服务器行为,该现象在ios和android之间不统一。

如果你的web服务器没有能够处理该行为的关联关系,可能会出现get接口都是好的,但是post出错的情况,这时,我们需要为options操作配置一个特殊的返回结构,例如我们用到的(从网上摘抄)

if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        #
        # Om nom nom cookies
        #
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }

Options因为只是预请求,所以我们就不用麻烦去配 Access-Control-Allow-Origin了,反正正式请求的时候再判断也可以。

  • 20
    点赞
  • 77
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 在Nginx配置access-control-allow-origin是为了解决跨域访问的问题。 首先,需要在Nginx配置文件中添加以下代码: ```nginx location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; if ($request_method = 'OPTIONS') { add_header Access-Control-Max-Age 1728000; add_header Content-Type text/plain; add_header Content-Length 0; return 204; } } ``` 上述配置代码中,Access-Control-Allow-Origin设置为*,表示允许所有源进行访问。如果希望只允许特定的域名访问,可以将*更改为相应的域名。 Access-Control-Allow-Methods用于设置支持的请求方法,如GET、POST和OPTIONS等。 Access-Control-Allow-Headers设置支持的请求头,如DNT、Content-Type等。 如果请求方法是OPTIONS,表示发送的是预检请求(preflight request),那么需要在返回头中加入Access-Control-Max-Age、Content-Type和Content-Length等相关信息,并返回状态码204。 以上配置代码应该添加到需要解决跨域问题的站点的Nginx配置文件中,完成后重新加载Nginx配置即可生效。 通过上述配置,实现了在Nginx配置access-control-allow-origin,解决了跨域访问的问题。通过设置允许的域名、请求方法和请求头,可以确保安全且合法的跨域访问。 ### 回答2: access-control-allow-origin是一种跨域资源共享(CORS)机制,在nginx配置该功能可以允许指定的域名访问服务器资源。 要配置access-control-allow-origin,首先需要编辑nginx配置文件。通常,该文件位于/etc/nginx/nginx.conf。 在配置文件中找到相应的location块,该块用于指定需要配置access-control-allow-origin的路径。在该location块中,可以添加以下配置项来配置access-control-allow-origin: 1. 添加add_header设置access-control-allow-origin值为指定的域名。例如,可以使用以下配置项: ``` location /api { add_header Access-Control-Allow-Origin example.com; } ``` 这样配置后,只有来自example.com域名的请求才能访问/api路径下的资源。 2. 如果希望允许任意域名访问,可以使用通配符*作为access-control-allow-origin的值: ``` location /api { add_header Access-Control-Allow-Origin *; } ``` 这样配置后,所有域名的请求都可以访问/api路径下的资源。 3. 可以使用变量来动态设置access-control-allow-origin的值。例如,可以使用$http_origin变量来获取请求中的Origin头,并将其作为access-control-allow-origin的值: ``` location /api { add_header Access-Control-Allow-Origin $http_origin; } ``` 这样配置后,将会允许请求中的Origin头所指定的域名访问/api路径下的资源。 配置完成后,需要重新加载nginx配置文件,使配置生效。可以使用命令sudo service nginx reload或sudo systemctl reload nginx来重新加载配置文件。 通过以上配置nginx可以实现access-control-allow-origin的功能,从而允许指定的域名跨域访问服务器资源。 ### 回答3: access-control-allow-origin是一个用于跨域资源共享(CORS)的HTTP响应头部字段,用于指示服务器允许哪些域名的网页可以访问当前网站的资源。 在nginx配置access-control-allow-origin的方法如下: 1. 打开nginx配置文件,一般路径是/etc/nginx/nginx.conf。 2. 在http块下添加以下代码: ```nginx http { ... server { ... location / { # 允许指定域名跨域访问 add_header Access-Control-Allow-Origin http://example.com; # 或者允许所有域名跨域访问 add_header Access-Control-Allow-Origin *; ... } ... } ... } ``` 这里的http://example.com是一个示例域名,可以根据实际需求修改为需要允许跨域访问的域名。 3. 保存配置文件并重新启动nginx服务。 配置完成后,服务器将在响应头中添加Access-Control-Allow-Origin字段,并根据配置的域名来限制跨域访问。如果配置了具体的域名,只有来自该域名的请求才能成功访问当前网站的资源;如果配置了通配符`*`,则任何域名都可以访问当前网站的资源。 值得注意的是,配置access-control-allow-origin只是服务器端的配置,在服务端返回响应时决定是否允许跨域访问,而不是由客户端控制。这样可以有效地保护服务器的安全性,防止恶意网站滥用跨域资源。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百家饭OpenAPI

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值