在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。跨域访问违反了同源策略，同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源（相同域名或IP的资源）。

如何确定是跨域请求

A域名资源请求到B/C……域名
你当前访问的域名是http的，但请求的部分资源是https的
当使用ajax访问远程服务器时，请求失败，浏览器报如上错误。这是出于安全的考虑，默认禁止跨域访问导致的。

如果是跨域访问，这时候就会报错

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

错误场景如：我的WordPress报错：Fonts –No 'Access-Control-Allow-Origin'，已经提示我字体文件请求http url跨域了，然后根据我用的服务环境设置如下就行，参考：https://www.uedbox.com/post/50992/

Nginx跨域设置No Access-Control-Allow-Origin无效的解决办法

报错：Access to font at 'https://pic.xmmup.com/i/resource/iconfont.ttf?t=1501323857226' from origin 'https://www.xmmup.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

不能加载字体或图片

解决方案：在Nginx中配置：

-- 我的用这个解决的（多域名） 
map $http_origin $allow_origin {
    default "";
    "~^(https?://localhost(:[0-9]+)?)" $1;
    "~^(https?://127.0.0.1(:[0-9]+)?)" $1; 
    "~^(https?://192.168.10.[\d]+(:[0-9]+)?)" $1; 
    "~^https://www.xmmup.com" https://www.xmmup.com;
    "~^https://mp.weixin.qq.com" https://mp.weixin.qq.com;
}
server
{
  # 解决has been blocked by CORS policy
    add_header 'Access-Control-Allow-Origin' $allow_origin;
  # add_header 'Access-Control-Allow-Origin' 'https://www.xmmup.com';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET,POST';
}   

-- 我的用这个解决的（单域名）
add_header 'Access-Control-Allow-Origin' 'https://www.xmmup.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST';

-- 或者
location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

set $origin '*';#写入需要跨域的请求地址
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' $origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
}

if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' $origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' $origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

-- 我的用这个解决的（多域名）

map $http_origin $allow_origin {

default "";

"~^(https?://localhost(:[0-9]+)?)" $1;

"~^(https?://127.0.0.1(:[0-9]+)?)" $1;

"~^(https?://192.168.10.[\d]+(:[0-9]+)?)" $1;

"~^https://www.xmmup.com" https://www.xmmup.com;

"~^https://mp.weixin.qq.com" https://mp.weixin.qq.com;

}

server

{

# 解决has been blocked by CORS policy

add_header 'Access-Control-Allow-Origin' $allow_origin;

# add_header 'Access-Control-Allow-Origin' 'https://www.xmmup.com';

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET,POST';

}

-- 我的用这个解决的（单域名）

add_header 'Access-Control-Allow-Origin' 'https://www.xmmup.com';

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET,POST';

-- 或者

location ~* \.(eot|ttf|woff)$ {

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

}

set $origin '*';#写入需要跨域的请求地址

if ($request_method = 'OPTIONS') {

add_header 'Access-Control-Allow-Origin' $origin;

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Max-Age' 1728000;

add_header 'Content-Type' 'text/plain charset=UTF-8';

add_header 'Content-Length' 0;

return 204;

}

if ($request_method = 'POST') {

add_header 'Access-Control-Allow-Origin' $origin;

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

if ($request_method = 'GET') {

add_header 'Access-Control-Allow-Origin' $origin;

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

参数	说明
Control-Allow-Origin	表示允许访问的外域请求。
Access-Control-Allow-Headers	首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。
Access-Control-Allow-Methods	首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。

Nginx允许指定单个域名跨域访问

location /{
    #add_header Access-Control-Allow-Origin *; #允许所有域名不安全
    add_header 'Access-Control-Allow-Origin' 'https://www.sundayle.com';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
    if ($request_method = 'OPTIONS') {
        return 204;
    }
...
}

location /{

#add_header Access-Control-Allow-Origin *; #允许所有域名不安全

add_header 'Access-Control-Allow-Origin' 'https://www.sundayle.com';

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';

if ($request_method = 'OPTIONS') {

return 204;

}

...

}

第一条指令：接受www.sundayle.com 跨域请求
第二条指令：当该标志为真时，响应于该请求是否可以被暴露(可选)
第三条指令：指定请求的方法，可以是GET, POST, OPTIONS, PUT, DELETE等(可选)
第四条指令：允许脚本访问的返回头(可选)
第五条指令：给OPTIONS 添加 204的返回，是为了处理在发送POST请求时Nginx依然拒绝访问的错误，发送”预检请求”时，需要用到方法 OPTIONS ,所以服务器需要允许该方法。

Nginx允许多个域名跨域访问

方法一：使用IF（不建议）

虚拟主机比较多，不方便

server {
set $allow_origin "";
if ( $http_origin ~ '^https?://(www|m).sundayle.com' ) {
      set $allow_origin $http_origin;
}
    location /{
        add_header 'Access-Control-Allow-Origin' $allow_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,X_Requested_With,If-Modified-Since,Cache-Control,Content-Type';
        if ($request_method = 'OPTIONS') {
            return 204;
        }
...
}

server {

set $allow_origin "";

if ( $http_origin ~ '^https?://(www|m).sundayle.com' ) {

set $allow_origin $http_origin;

}

location /{

add_header 'Access-Control-Allow-Origin' $allow_origin;

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

add_header 'Access-Control-Allow-Headers' 'Token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,X_Requested_With,If-Modified-Since,Cache-Control,Content-Type';

if ($request_method = 'OPTIONS') {

return 204;

}

...

}

本人提供Oracle(OCP、OCM)、MySQL(OCP)、PostgreSQL(PGCA、PGCE、PGCM)等数据库的培训和考证业务，私聊QQ646634621或微信db_bao，谢谢！

方法二：使用MAP(建议)

map $http_origin $allow_origin {
    default "";
    "~^(https?://localhost(:[0-9]+)?)" $1;
    "~^(https?://127.0.0.1(:[0-9]+)?)" $1; 
    "~^(https?://192.168.10.[\d]+(:[0-9]+)?)" $1; 
    "~^https://www.sunday.com" https://www.sundayle.com;
    "~^https://m.sundayle.com" https://m.sundayle.com;
    "~^(https?://[\w]+.open.sundayle.com)" $1;
    #"~^(https?://([\w]+.)?[\w]+.open.sundayle.com)" $1;  #允许一级和二级域名

}

server {
    location /{
        add_header 'Access-Control-Allow-Origin' $allow_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,X_Requested_With,If-Modified-Since,Cache-Control,Content-Type';
        if ($request_method = 'OPTIONS') {
            return 204;
        }
...
}

map $http_origin $allow_origin {

default "";

"~^(https?://localhost(:[0-9]+)?)" $1;

"~^(https?://127.0.0.1(:[0-9]+)?)" $1;

"~^(https?://192.168.10.[\d]+(:[0-9]+)?)" $1;

"~^https://www.sunday.com" https://www.sundayle.com;

"~^https://m.sundayle.com" https://m.sundayle.com;

"~^(https?://[\w]+.open.sundayle.com)" $1;

#"~^(https?://([\w]+.)?[\w]+.open.sundayle.com)" $1; #允许一级和二级域名

}

server {

location /{

add_header 'Access-Control-Allow-Origin' $allow_origin;

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

add_header 'Access-Control-Allow-Headers' 'Token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,X_Requested_With,If-Modified-Since,Cache-Control,Content-Type';

if ($request_method = 'OPTIONS') {

return 204;

}

...

}

跨域测试

curl -I -X OPTIONS -H "Origin: https://www.sundayle.com" "https://api.sundayle.com"
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.sundayle.com
...

curl -I -X OPTIONS -H "Origin: https://www.sundayle.com" "https://api.sundayle.com"

HTTP/1.1 200 OK

Access-Control-Allow-Origin: https://www.sundayle.com

...

其他

Nginx 更多判断

location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://www.sundayle.com';
        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';
        add_header 'Access-Control-Max-Age' 1728000; # 20days
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' 'https://www.sundayle.com';
        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';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' 'https://www.sundayle.com';
        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';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}

location / {

if ($request_method = 'OPTIONS') {

add_header 'Access-Control-Allow-Origin' 'https://www.sundayle.com';

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';

add_header 'Access-Control-Max-Age' 1728000; # 20days

add_header 'Content-Type' 'text/plain; charset=utf-8';

add_header 'Content-Length' 0;

return 204;

}

if ($request_method = 'POST') {

add_header 'Access-Control-Allow-Origin' 'https://www.sundayle.com';

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';

add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

}

if ($request_method = 'GET') {

add_header 'Access-Control-Allow-Origin' 'https://www.sundayle.com';

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';

add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

}

Apache中启用CORS
在httpd配置或.htaccess文件中添加如下语句

SetEnvIf Origin "^(.*\.example\.com)$" ORIGIN_SUB_DOMAIN=$1  
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN

1 2	SetEnvIf Origin "^(.*\.example\.com)$" ORIGIN_SUB_DOMAIN=$1 Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN

PHP中启用CORS
通过在服务端设置Access-Control-Allow-Origin响应头

允许所有来源访问

<?php
header("Access-Control-Allow-Origin: *");
?>

<?php

header("Access-Control-Allow-Origin: *");

允许来自特定源的访问

<?php
header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
?>

<?php

header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);

配置多个访问源
由于浏览器实现只支持了单个origin、*、null，如果要配置多个访问源，可以在代码中处理如下

<?php
$allowe_origin  = array(  
                            "http://www.example.com"   ,  
                            "http://app.example.com"  ,  
                            "http://cms.example.com"  ,  
                          );  
if (in_array($_SERVER['HTTP_ORIGIN'], $allowe_origin)){    
    @header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);  
}
?>

<?php

$allowe_origin = array(

"http://www.example.com" ,

"http://app.example.com" ,

"http://cms.example.com" ,

);

if (in_array($_SERVER['HTTP_ORIGIN'], $allowe_origin)){

@header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);

}

HTML中启用CORS

<meta http-equiv="Access-Control-Allow-Origin" content="*">

1	<meta http-equiv="Access-Control-Allow-Origin" content="*">

错误：The request client is not a secure context and the resource is in more-private address space private.

报错：

2.168.88.250/wp-content/uploads/2022/07/logo-1.jpg' from origin 'http://116.62.205.34:81' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private.

解决：

chrome://flags/#block-insecure-private-network-requests

1	chrome://flags/#block-insecure-private-network-requests

将Block insecure private network requests.项的Default改为Disabled即可。

总结

1、在Access-Control-Allow-Origin后添加多个域名，然后用空格隔开，这种方法是不生效的。

参考

https://sundayle.com/nginx-allows-multiple-domain-cors/
正则表达式在线测试
 Nginx 通过 CORS 实现跨域
 阮一峰跨域资源共享 CORS 详解

打赏赞(3)

标签： Access-Control-Allow-Origin Nginx 跨域访问

小麦苗

学习或考证，均可联系麦老师，请加微信db_bao或QQ646634621

发表回复取消回复

要发表评论，您必须先登录。

2023年 5月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

AI (2)
ClickHouse (5)
DM达梦 (9)
Docker (34)
GBase (34)
Greenplum (85)
HANA (2)
K8S (14)
Kafka (3)
Memcached (2)
MongoDB (3)
MySQL (177)
NoSQL (3)
OceanBase (14)
OGG (43)
openGauss (9)
Oracle (590)
OS (329)
PostgreSQL (229)
Python (26)
Redis (18)
SQL Server (106)
SQLite (1)
StarRocks (9)
TDSQL (5)
TiDB (18)
YMatrix (5)
中间件 (9)
云 (10)
人大金仓KingBase (7)
其它 (78)
培训考证 (43)
大数据 (4)
存储 (4)
巡检监控 (43)
工具 (65)
数据迁移 (16)
架构篇 (9)
生活 (8)
电脑 (14)
网络 (78)
育儿 (5)
视频 (17)
面试笔试 (38)

嘿，我是小麦，需要帮助随时找我哦

18509239930
个人微信
麦老师QQ聊天
个人邮箱
点击加入QQ群
个人微店
回到顶部

小麦苗

Nginx配置跨域访问

什么是跨域访问

如何确定是跨域请求

Nginx跨域设置No Access-Control-Allow-Origin无效的解决办法

Nginx允许指定单个域名跨域访问

Nginx允许多个域名跨域访问

方法一：使用IF（不建议）

方法二：使用MAP(建议)

跨域测试

其他

错误：The request client is not a secure context and the resource is in more-private address space private.

总结

参考

相关文章

您可能还喜欢...

发表回复取消回复

博客寄语

博客概况

本站其它工具

搜标题

搜索本网站

标签云☁

登陆本博客

博客日历

博客归档

博客分类

Nginx配置跨域访问

什么是跨域访问

如何确定是跨域请求

Nginx跨域设置No Access-Control-Allow-Origin无效的解决办法

Nginx允许指定单个域名跨域访问

Nginx允许多个域名跨域访问

方法一：使用IF（不建议）

方法二：使用MAP(建议)

跨域测试

其他

错误：The request client is not a secure context and the resource is in more-private address space private.

总结

参考

相关文章

您可能还喜欢...

Nginx高可用搭建

Nginx安装配置及端口转发

Nginx配置yum代理上网

发表回复 取消回复

博客寄语

博客概况

本站其它工具

搜标题

搜索本网站

标签云☁

登陆本博客

博客日历

博客归档

博客分类

发表回复取消回复