精华内容
下载资源
问答
  • 2021-12-24 16:21:20

    简介


    下面我们就来认识下CORS及在nginx中如何配置。

    CORS
    CORS是一个W3C标准,全称是跨域资源共享(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

    简单来说就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域。
    CORS提供的Headers,在Request包和Response包中都有一部分:

    #HTTP Response Header
    Access-Control-Allow-Origin
    Access-Control-Allow-Credentials
    Access-Control-Allow-Methods
    Access-Control-Allow-Headers
    Access-Control-Expose-Headers
    Access-Control-Max-Age
    #HTTP Request Header
    Access-Control-Request-Method
    Access-Control-Request-Headers
    其中Access-Control-Allow-Headers一般包含基本字段,如Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma;对于其他字段,就必须在Access-Control-Expose-Headers里面指定。

    CORS分类
    浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)
    1.简单请求
    只要同时满足以下两大条件,就属于简单请求

    1.请求方法是以下三种方法之一:
    HEAD
    GET
    POST
    2.HTTP的头信息不超出以下几种字段:
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
    凡是不同时满足上面两个条件,就属于非简单请求。
    2.非简单请求
    非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT、DELETE或OPTIONS,或者Content-Type字段的类型是application/json。

    跨域处理方式
    为什么要讲简单请求和非简单请求呢?因为浏览器对对这两种请求的处理,是不一样的。
    1.简单请求
    对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。
    处理如下:

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    在nginx上经以上配置,一般能够解决简单请求的跨域处理。
    CORS请求默认不发送Cookie和HTTP认证信息。但是如果要把Cookie发到服务器,要服务器同意,指定Access-Control-Allow-Credentials字段。

    add_header 'Access-Control-Allow-Credentials' 'true';
    需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。
    2.非简单请求

    (1)非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight),预捡的请求方法是OPTIONS。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。
    因此我们可以在浏览器的开发者工具中查看头信息,若头信息中有OPTIONS方法,说明此次CORS请求是非简单请求,需要在nginx中添加头:

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    此时虽然我们已经添加了所有的Methods方法,但是预检请求仍不会通过,因此此时nginx对OPTIONS方法返回"405 Method Not Allowed”或者403。我们需要在nginx对OPTIONS方法进行处理,如下:

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
        return 200;
    }

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    #在location处添加以下内容
    if ($request_method = 'OPTIONS') {
        return 200;
    }
    我们在nginx上将OPTIONS方法返回200,而不是405或403。

    (2)服务器经过以上设置通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。

    Nginx通过CORS,实现跨域
    Nginx标准配置

    server {
        ... ...
     
            # #设置跨域配置 Start
            set $cors_origin "";
            if ($http_origin ~* "^http://api.xx.com$"){
                    set $cors_origin $http_origin;
            }
     
            add_header Access-Control-Allow-Origin $cors_origin always; 
            add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
            add_header Access-Control-Allow-Credentials true always;
            add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
            add_header Access-Control-Max-Age 1728000 always;
     
            # 预检请求处理
            if ($request_method = OPTIONS) {
                    return 204;
            }
            # #设置跨域配置 End
     
        ... ...
    }
    1.设置Origin:表示服务器可以接受的请求

    add_header Access-Control-Allow-Origin http://api.baidu.com
    表示 http://api.baidu.com 可以请求数据。这个可以设置为*星号代表任意跨源请求都支持,但不建议这样设置;因为设置为*星号将不在支持发送Cookie。

    2.设置多域名配置

            set $cors_origin "";
            if ($http_origin ~* "^http://api.xx.com$"){
                    set $cors_origin $http_origin;
            }
            if ($http_origin ~* "^http://api2.xx.com$"){
                    set $cors_origin $http_origin;
            }
    这个写法主要是为了支持多域名设置,通过对请求origin的判断是否与指定跨域源一致,然后在进行header的设置;

    3.设置跨域支持的请求类型

    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
    4.设置跨域请求是否允许发送Cookie,true:支持,false:不支持

    add_header Access-Control-Allow-Credentials true always;
    5.设置跨域请求允许的Header头信息字段,以逗号分隔的字符串

    add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
    注:需要特别注意,凡是API中约定了自定义Header,都需要在这里增加,否则不可以跨域请求。

    6.本次预检请求的有效期,单位为秒,在允许缓存该条请求回应1728000秒内,无需在发出一条预检请求。

    add_header Access-Control-Max-Age 1728000 always;
    7.always 参数的定义

    ... ... always
    Nginx 规则 add_header默认只会加入到指定response code的请求中;

    见官网介绍:

    Syntax: add_header name value [always];
    Default:    —
    Context:    http, server, location, if in location
     
     
    Adds the specified field to a response header provided that the response code equals 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13), or 308 (1.13.0). The value can contain variables.
    指定了 always则无论什么请求都添加header:

    If the always parameter is specified (1.7.5), the header field will be added regardless of the response code.
    8.预检请求处理

            if ($request_method = OPTIONS) {
                    return 204;
            }
    CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight);浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

    "预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的,因此我们需要在Nginx配置中,针对预检请求进行处理,直接返回204 & Response Header,表示服务器支持允许跨源的访问。

    AJAX配置

    xhr.withCredentials = false;
    CORS请求默认不发送Cookie和HTTP认证信息,如果需要支持除了服务端增加设置,AJAX请求中打开withCredentials属性。

    参考:

    http://www.ruanyifeng.com/blog/2016/04/cors.html

    http://www.yunweipai.com/
     

    更多相关内容
  • 使用nginx进行服务器管理,经常会遇到跨域问题,此文档就是解决此类问题; nginx跨域问题,解决多端口,多ip问题
  • 众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题。 什么是跨域?实现跨域的多种方式? ...
  • 今天小编就为大家分享一篇关于Nginx跨域设置Access-Control-Allow-Origin无效的解决办法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 主要介绍了Nginx跨域访问场景配置和防盗链详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • Nginx跨域配置

    万次阅读 2021-12-27 15:36:09
    跨域概述 1.1 同源策略 同源策略是一个安全策略。同源,指的是协议,域名,端口相同。浏览器处于安全方面的考虑,只允许本域名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读写对方的资源...

    一 跨域概述

     

    1.1 同源策略

    同源策略是一个安全策略。同源,指的是协议,域名,端口相同。浏览器处于安全方面的考虑,只允许本域名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读写对方的资源。

    同源策略主要是基于如下可能的安全隐患:

    1. 用户访问www.mybank.com,登录并进行网银操作,这时cookie等资源都生成并存放在浏览器;
    2. 用户突然访问一个另一个网站;
    3. 该网站在页面中,拿到银行的cookie,比如用户名,登录token等,然后发起对www.mybank.com的操作;
    4. 若此时浏览器不对跨域做限制,并且银行也没有做相应的安全处理的话,那么用户的信息有可能就这么泄露了。

    1.2 跨域简介

    CORS是一个W3C标准,全称是跨域资源共享(Cross-origin resource sharing)。即从一个域名的网页去请求另一个域名的资源。本质上对于此类请求,只要协议、域名、端口有任何一个的不同,就被当作是跨域,即都被当成不同源。

    通常基于安全考虑,Nginx启用了同源策略,即限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

    但若同一个公司内部存在多个不同的子域,子域之间需要互访,此时可通过跨域进行实现。跨域可通过JSONP和CORS进行实现。

    注意:

    1. 如果是协议和端口造成的跨域问题"前端"是无法解决的;
    2. 在跨域实现上,仅仅是通过"URL的首部"来识别而不会根据域名对应的IP地址是否相同来判断。"URL的首部"可以理解为""协议,域名和端口必须匹配";
    3. 请求跨域并不是请求发不出去,请求可正常发出,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。

    提示:

    本实验基于Nginx的CORS实现跨域,更多JSONP等参考:
    https://juejin.im/post/5e6c58b06fb9a07ce01a4199。

    1.3 跨域处理流程

    1. 首先查看http头部有无origin字段;
    2. 如果没有,或者不允许,直接当成普通人请求处理,结束;
    3. 如果有并且是允许的,那么再看是否是preflight(method=OPTIONS);
    4. 如果是preflight,就返回Allow-Headers、Allow-Methods等,内容为空;
    5. 如果不是preflight,就返回Allow-Origin、Allow-Credentials等,并返回正常内容。

      1 location /pub/(.+) {
      2     if ($http_origin ~ <允许的域(正则匹配)>) {
      3         add_header 'Access-Control-Allow-Origin' "$http_origin";
      4         add_header 'Access-Control-Allow-Credentials' "true";
      5         if ($request_method = "OPTIONS") {
      6             add_header 'Access-Control-Max-Age' 86400;
      7             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
      8             add_header 'Access-Control-Allow-Headers' 'reqid, nid, host, x-real-ip, x-forwarded-ip, event-type, event-id, accept, content-type';
      9             add_header 'Content-Length' 0;
     10             add_header 'Content-Type' 'text/plain, charset=utf-8';
     11             return 204;
     12         }
     13     }
     14     # 正常nginx配置
     15     ......
     16 }

    二 CORS介绍

    2.1 CORS实现

    CORS需要浏览器和后端同时支持。在后端配置了CORS实现跨域后,浏览器会自动进行CORS通信,从而实现跨域。

    2.2 请求类型

    在使用CORS的场景下,对于客户端(前端)的常见请求,可分类如下两类请求:

    • 简单请求

    只要同时满足以下两个条件,就属于简单的请求

    方法:GET、HEAD、POST。

    内容:Content-Type 的值仅限于下列三者之一 :

      • text/plain;
      • multipart/form-data;
      • application/x-www-form-urlencoded 请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器。
    • 复杂请求

    方法:DELETE、PUT。

    不符合以上条件的请求就肯定是复杂请求了。复杂请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求。该请求是option方法的,通过该请求来获知服务端是否允许跨域请求。

    回到顶部

    三 Nginx跨域配置

    3.1 配置语法

    语法:add_header name value [always];

    默认值:——

    可配置段:http, server, location, if in location

    配置项释义:

    • Access-Control-Allow-Origin:配置 Access-Control-Allow-Origin 为 * 表示服务器可以接受所有的请求源(Origin),即接受所有跨域的请求,也可以指定一个确定的URL。
    • Access-Control-Allow-Headers:配置 Access-Control-Allow-Headers,代表允许在请求该地址的时候带上指定的请求头,例如:Content-Type,Authorization,使用逗号(,)拼接起来放在双引号(")中,可根据实际请求类型添加,可防止出现以下错误:

    Request header field Content-Type is not allowed by
    Access-Control-Allow-Headers in preflight response。这个错误表示当前请求Content-Type的值不被支持。其实是因为发起了"application/json"的类型请求导致的。

    • Access-Control-Allow-Methods:配置 Access-Control-Allow-Methods,代表允许使用指定的方法请求该地址,常见的方法有:GET, POST, OPTIONS, PUT, PATCH, DELETE, HEAD。可防止出现以下错误:

    Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

    • Access-Control-Max-Age:配置 Access-Control-Max-Age,代表着在 86400 秒之内不用请求该地址的时候 不需要再进行预检请求,也就是跨域缓存。
    • Access-Control-Allow-Credentials 'true':可选字段,为true表示允许发送Cookie。同时,发送时,必须设置XMLHttpRequest.withCredentials为true才有效,请求若服务器不允许浏览器发送,删除该字段即可。
    • return 204:给OPTIONS 添加 204 的返回,为了处理在发送POST请求时Nginx依然拒绝访问的错误,发送"预检请求"时,需要用到方法 OPTIONS,所以服务器需要允许该方法。
    1. 对于简单请求,如GET,只需要在HTTP Response后添加Access-Control-Allow-Origin。
    2. 对于非简单请求,比如POST、PUT、DELETE等,浏览器会分两次应答。第一次preflight(method: OPTIONS),主要验证来源是否合法,并返回允许的Header等。第二次才是真正的HTTP应答。所以服务器必须处理OPTIONS应答。

    注意:如上的 add_header 最后都可以加上了 always,它表示不管返回状态码是多少都会使 add_header 生效,有些时候服务端可能会返回 4XX 的状态码,这时候如果少了 always 会导致 add_header 失效,从而导致浏览器报跨域错误。

    2.2 配置示例

    方案1 *:通配符,全部允许,存在安全隐患(不推荐)。

    一旦启用本方法,表示任何域名皆可直接跨域请求:

      1     server {
      2         ...
      3         location / {
      4             # 允许 所有头部 所有域 所有方法
      5             add_header 'Access-Control-Allow-Origin' '*';
      6             add_header 'Access-Control-Allow-Headers' '*';
      7             add_header 'Access-Control-Allow-Methods' '*';
      8             # OPTIONS 直接返回204
      9             if ($request_method = 'OPTIONS') {
     10                 return 204;
     11             }
     12         }
     13         ...
     14     }

    方案2:多域名配置(推荐)

    配置多个域名在map中 只有配置过的允许跨域:

      1  map $http_origin $corsHost {
      2         default 0;
      3         "~https://zzzmh.cn" https://zzzmh.cn;
      4         "~https://chrome.zzzmh.cn" https://chrome.zzzmh.cn;
      5         "~https://bz.zzzmh.cn" https://bz.zzzmh.cn;
      6     }
      7     server {
      8         ...
      9         location / {
     10             # 允许 所有头部 所有$corsHost域 所有方法
     11             add_header 'Access-Control-Allow-Origin' $corsHost;
     12             add_header 'Access-Control-Allow-Headers' '*';
     13             add_header 'Access-Control-Allow-Methods' '*';
     14             # OPTIONS 直接返回204
     15             if ($request_method = 'OPTIONS') {
     16                 return 204;
     17             }
     18         }
     19         ...
     20     }

    回到顶部

    三 跨域配置环境准备

    3.1 Nginx02环境预设

    主机

    域名

    备注

    Nginx01

    corssingle.linuxds.com

    corsmulti01.linuxds.com

    corsmulti02.linuxds.com

    corsmulti03.linuxds.com

    corsmulti04.linuxds.com

    cors跨域服务器,即需要配置允许跨域被访问。

    Nginx02

    source01.odocker.com

    访问cors的服务器01

    Nginx03

    source02.odocker.com

    访问cors的服务器02

      1 [root@nginx02 ~]# mkdir /usr/share/nginx/source01/
      2 [root@nginx02 ~]# echo '<h1>Source01</h1>' > /usr/share/nginx/source01/index.html

      1 [root@nginx02 ~]# vi /etc/nginx/conf.d/source01.conf
      2 server {
      3     listen  80;							#监听端口
      4     server_name  source01.odocker.com;				#配置虚拟主机名和IP
      5     location / {
      6         root   /usr/share/nginx/source01;			#请求匹配路径
      7         index  index.html;					#指定主页
      8         access_log  /var/log/nginx/source01.access.log  main;
      9         error_log   /var/log/nginx/source01.error.log  warn;
     10     }
     11 }

      1 [root@nginx02 ~]# nginx -t -c /etc/nginx/nginx.conf		#检查配置文件
      2 [root@nginx02 ~]# nginx -s reload				#重载配置文件

    3.2 Nginx03环境预设

      1 [root@nginx03 ~]# mkdir /usr/share/nginx/source02/
      2 [root@nginx03 ~]# echo '<h1>Source02</h1>' > /usr/share/nginx/source02/index.html

      1 [root@nginx03 ~]# vi /etc/nginx/conf.d/source02.conf
      2 server {
      3     listen  80;							#监听端口
      4     server_name  source02.odocker.com;				#配置虚拟主机名和IP
      5     location / {
      6         root   /usr/share/nginx/source02;			#请求匹配路径
      7         index  index.html;					#指定主页
      8         access_log  /var/log/nginx/source02.access.log  main;
      9         error_log   /var/log/nginx/source02.error.log  warn;
     10     }
     11 }

      1 [root@nginx03 ~]# nginx -t -c /etc/nginx/nginx.conf		#检查配置文件
      2 [root@nginx03 ~]# nginx -s reload				#重载配置文件

    3.3 预备环境验证

    浏览器分别测试访问:

    Nginx跨域配置

    回到顶部

    四 简单请求跨域

    4.1 单域名配置

    场景:允许来自source01.odocker.com的应用在cors.linuxds.com上跨域提取数据。

      1 [root@nginx01 ~]# mkdir /usr/share/nginx/corssingle/
      2 [root@nginx01 ~]# echo '<h1>Corssingle</h1>' > /usr/share/nginx/corssingle/index.html

      1 [root@nginx01 ~]# vi /etc/nginx/conf.d/corssingle.conf
      2 server
      3 {
      4     listen 80;
      5     server_name corssingle.linuxds.com;
      6     location /
      7     {
      8         root   /usr/share/nginx/corssingle;
      9         index  index.html index.htm;
     10         access_log  /var/log/nginx/corssingle.access.log  main;
     11         error_log   /var/log/nginx/corssingle.error.log  warn;
     12         #proxy_pass http://source01.odocker.com;
     13         add_header 'Access-Control-Allow-Origin' 'http://source01.odocker.com';
     14         add_header 'Access-Control-Allow-Credentials' 'true';
     15         add_header 'Access-Control-Max-Age' 86400;
     16         add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
     17         add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
     18     }
     19 }

      1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf		#检查配置文件
      2 [root@nginx01 ~]# nginx -s reload				#重载配置文件

    4.2 单域名确认验证

    [root@client ~]# curl -I -H "Origin: http://source01.odocker.com" http://corssingle.linuxds.com

     

    浏览器访问
    http://corssingle.linuxds.com/。

     

    4.3 多域名配置方法一

    场景:允许来自source01.odocker.com和source02.odocker.com的应用,即允许多个域名跨域访问corsmulti01.linuxds.com上的资源。

      1 [root@nginx01 ~]# mkdir /usr/share/nginx/corsmulti01/
      2 [root@nginx01 ~]# echo '<h1>Corsmulti01</h1>' > /usr/share/nginx/corsmulti01/index.html

      1 [root@nginx01 ~]# vi /etc/nginx/conf.d/corsmulti01.conf
      2 map $http_origin $corsHost {
      3     default 0;
      4     "~http://source01.odocker.com" http://source01.odocker.com;
      5     "~http://source02.odocker.com" http://source02.odocker.com;
      6 }
      7 server {
      8     listen 80;
      9     server_name corsmulti01.linuxds.com;
     10     location /
     11     {
     12         if ($request_method = 'OPTIONS') {
     13             return 204;
     14         }
     15         root   /usr/share/nginx/corsmulti01;
     16         index  index.html index.htm;
     17         access_log  /var/log/nginx/corsmulti01.access.log  main;
     18         error_log   /var/log/nginx/corsmulti01.error.log  warn;
     19 
     20         add_header 'Access-Control-Allow-Origin' $corsHost;
     21         add_header 'Access-Control-Max-Age' 86400;
     22         add_header 'Access-Control-Allow-Credentials' 'true';
     23         add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
     24         add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
     25 
     26     }
     27 }

      1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf		#检查配置文件
      2 [root@nginx01 ~]# nginx -s reload				#重载配置文件

    4.4 方法一确认验证

    [root@client ~]# curl -I -H "Origin: http://source01.odocker.com" http://corsmulti01.linuxds.com

     

    浏览器访问
    http://corsmulti01.linuxds.com/。

     

    4.5 多域名配置方法二

    场景:允许来自
    localhostsource01.odocker.com或source02.odocker.com的应用,即允许多个域名跨域访问corsmulti02.linuxds.com上的资源。

      1 [root@nginx01 ~]# mkdir /usr/share/nginx/corsmulti02/
      2 [root@nginx01 ~]# echo '<h1>Corsmulti02</h1>' > /usr/share/nginx/corsmulti02/index.html

    Nginx跨域配置

      1 [root@nginx01 ~]# vi /etc/nginx/conf.d/corsmulti02.conf
      2 server {
      3     listen 80;
      4     server_name corsmulti02.linuxds.com;
      5     location /
      6     {
      7         root   /usr/share/nginx/corsmulti02;
      8         index  index.html index.htm;
      9         access_log  /var/log/nginx/corsmulti02.access.log  main;
     10         error_log   /var/log/nginx/corsmulti02.error.log  warn;
     11         set $cors '';
     12         if ($http_origin ~* 'https?://(localhost|source01\.odocker\.com|source01\.odocker\.com)') {
     13             set $cors 'true';
     14         }
     15 
     16         if ($cors = 'true') {
     17             add_header 'Access-Control-Allow-Origin' "$http_origin";
     18             add_header 'Access-Control-Allow-Credentials' 'true';
     19             add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
     20             add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
     21         }
     22 
     23         if ($request_method = 'OPTIONS') {
     24             return 204;
     25         }
     26     }
     27 }
      1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf		#检查配置文件
      2 [root@nginx01 ~]# nginx -s reload				#重载配置文件

    4.6 方法二确认验证

    [root@client ~]# curl -I -H "Origin: http://source01.odocker.com" http://corsmulti02.linuxds.com

     

    浏览器访问
    http://corsmulti02.linuxds.com/,略。

    4.7 多域名配置方法三

    场景:允许来自*.odocker.com的应用,即允许多个域名跨域访问corsmulti03.linuxds.com上的资源。

      1 [root@nginx01 ~]# mkdir /usr/share/nginx/corsmulti03/
      2 [root@nginx01 ~]# echo '<h1>Corsmulti03</h1>' > /usr/share/nginx/corsmulti03/index.html

      1 [root@nginx01 ~]# vi /etc/nginx/conf.d/corsmulti03.conf
      2 server {
      3     listen 80;
      4     server_name corsmulti03.linuxds.com;
      5     location /
      6     {
      7         root   /usr/share/nginx/corsmulti03;
      8         index  index.html index.htm;
      9         access_log  /var/log/nginx/corsmulti03.access.log  main;
     10         error_log   /var/log/nginx/corsmulti03.error.log  warn;
     11         if ( $http_origin ~ http://(.*).odocker.com){
     12             set $allow_url $http_origin;
     13         }
     14     	#CORS(Cross Orign Resource-Sharing)跨域控制配置
     15         add_header 'Access-Control-Allow-Credentials' 'true';	#是否允许请求带有验证信息
     16         add_header 'Access-Control-Allow-Origin' "$allow_url";	#允许跨域访问的域名,可以是一个域的列表,也可以是通配符*
     17         add_header 'Access-Control-Allow-Headers' 'x-requested-with,content-type,Cache-Control,Pragma,Date,x-timestamp';				#允许脚本访问的返回头
     18         add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS,PUT,DELETE';	#允许使用的请求方法,以逗号隔开
     19         add_header 'Access-Control-Expose-Headers' 'WWW-Authenticate,Server-Authorization';							        #允许自定义的头部,以逗号隔开,大小写不敏感
     20         add_header P3P 'policyref="/w3c/p3p.xml", CP="NOI DSP PSAa OUR BUS IND ONL UNI COM NAV INT LOC"';						#P3P支持跨域cookie操作
     21     }
     22 }

      1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf		#检查配置文件
      2 [root@nginx01 ~]# nginx -s reload				#重载配置文件

    4.8 方法三确认验证

    [root@client ~]# curl -I -H "Origin: http://source01.odocker.com" http://corsmulti03.linuxds.com

     

    浏览器访问
    http://corsmulti03.linuxds.com/。

    五 复杂请求跨域

    5.1 复杂请求

    默认
    Access-Control-Allow-Origin开启跨域请求只支持GET、HEAD、POST、OPTIONS请求,使用DELETE发起跨域请求时,浏览器出于安全考虑会先发起OPTIONS请求,服务器端接收到的请求方式就变成了OPTIONS,所以会导致服务器的405 Method Not Allowed。

    5.2 复杂请求配置

      1 [root@nginx01 ~]# mkdir /usr/share/nginx/corscomplex/
      2 [root@nginx01 ~]# echo '<h1>Corscomplex</h1>' > /usr/share/nginx/corscomplex/index.html
      1 [root@nginx01 ~]# vi /etc/nginx/conf.d/corscomplex.conf
      2 server
      3 {
      4     listen 80;
      5     server_name corscomplex.linuxds.com;
      6     location /
      7     {
      8         root   /usr/share/nginx/corscomplex;
      9         index  index.html index.htm;
     10         access_log  /var/log/nginx/corscomplex.access.log  main;
     11         error_log   /var/log/nginx/corscomplex.error.log  warn;
     12         #proxy_pass http://source01.odocker.com;
     13 
     14         add_header Cache-Control private;
     15         add_header 'Access-Control-Allow-Origin' 'http://source01.odocker.com';
     16         add_header 'Access-Control-Allow-Credentials' 'true';
     17         add_header 'Access-Control-Max-Age' 86400;
     18         add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
     19         add_header 'Access-Control-Allow-Headers' 'DNT,Content-Type,Cache-Control,User-Agent,Keep-Alive,Authorization,Accept,X-Mx-ReqToken,Origin,X-Requested-With,X-CustomHeader,If-Modified-Since,Cache-Control,If-Modified-Since';
     20         if ($request_method = 'OPTIONS') {
     21             add_header 'Access-Control-Allow-Origin' 'http://source01.odocker.com';
     22             add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE';
     23             return 204;
     24         }
     25     }
     26 }

      1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf		#检查配置文件
      2 [root@nginx01 ~]# nginx -s reload				#重载配置文件

    5.3 复杂请求确认验证

      1 [root@client ~]# curl -I -X OPTIONS -H "Origin: http://source01.odocker.com" http://corscomplex.linuxds.com
      2 [root@client ~]# curl -I -H "Origin: http://source01.odocker.com" http://corscomplex.linuxds.com

     

    浏览器访问
    http://corscomplex.linuxds.com/。

     

    回到顶部

    六 其他更多示例

    6.1 区分请求跨域一

      1 server
      2 {
      3     listen 80;
      4     server_name multireq01.linuxds.com;
      5     root root   /usr/share/nginx/multireq01;
      6     access_log  /var/log/nginx/multireq01.access.log  main;
      7     error_log   /var/log/nginx/multireq01.error.log  warn;
      8     location /
      9     {
     10         if ($request_method = 'OPTIONS') {
     11             add_header 'Access-Control-Allow-Origin' '*';
     12             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
     13             add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     14             add_header 'Access-Control-Max-Age' 1728000;
     15             add_header 'Content-Type' 'text/plain charset=UTF-8';
     16             add_header 'Content-Length' 0;
     17             return 204;
     18         }
     19         if ($request_method = 'POST') {
     20             add_header 'Access-Control-Allow-Origin' '*';
     21             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
     22             add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     23         }
     24         if ($request_method = 'GET') {
     25             add_header 'Access-Control-Allow-Origin' '*';
     26             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
     27             add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     28         }
     29     }
     30 }

    6.2 区分请求跨域二

      1 server
      2 {
      3     listen 80;
      4     server_name multireq02.linuxds.com;
      5     root root   /usr/share/nginx/multireq02;
      6     access_log  /var/log/nginx/multireq02.access.log  main;
      7     error_log   /var/log/nginx/multireq02.error.log  warn;
      8     location /
      9     {
     10         if ($request_method = 'OPTIONS') {
     11             add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com';
     12             add_header 'Access-Control-Allow-Credentials' 'true';
     13             add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
     14             add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
     15             return 204;
     16         }
     17         if ($request_method = 'POST') {
     18             add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com';
     19             add_header 'Access-Control-Allow-Credentials' 'true';
     20             add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
     21             add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
     22         }
     23         if ($request_method = 'GET') {
     24             add_header 'Access-Control-Allow-Origin' 'https://docs.domain.com';
     25             add_header 'Access-Control-Allow-Credentials' 'true';
     26             add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
     27             add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
     28         }
     29     }
     30 }
    展开全文
  • nginx跨域配置

    2018-06-26 14:09:23
    介绍如何配置nginx实现跨域,简单明了,很方便。需要的自行下载
  • nginx 配置跨域不生效 如下配置 server { listen 80; server_name localhost; # 接口转发 location /api/ { # 允许请求地址跨域 * 做为通配符 add_header 'Access-Control-Allow-Origin' '*'; # 设置请求...
  • 本篇文章主要介绍了利用nginx解决cookie跨域访问的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Nginx跨域配置--端口转发

    千次阅读 2022-01-20 14:12:18
    功能:利用Nginx实现端口转发 测试服务器 @RestController public class UserController { @PostMapping("/fun") public String fun(){ System.out.println("fun"); return "fun"; } } 注:假设其请求地址:...

    功能:利用Nginx实现端口转发

    Nginx设置

    修改Nginx解压后的conf目录下的nginx.conf文件,在其中添加内容:

    location /api/ {
    	proxy_pass http://127.0.0.1:9999/;
    }
    

    如下图所示:
    在这里插入图片描述

    测试服务器

    @RestController
    public class UserController {
        @PostMapping("/fun")
        public String fun(){
            System.out.println("fun");
            return "fun";
        }
     }
    

    注:假设其请求地址:http://localhost:9999/fun

    使用postman测试

    • 正常访问:
      在这里插入图片描述
    • 不带端口访问
      在这里插入图片描述
    • 跨域端口转发
      在这里插入图片描述
    展开全文
  • nginx配置详解,nginx跨域问题

    千次阅读 2021-04-29 17:04:20
    本文介绍LNMP环境下nginx配置,实现域名访问,关于linux环境下nginx的安装可以参考centos7 搭建 php7.1.3+mysql5.7+nginx1.11 一、更改hosts文件 设置要访问的本地域名,比如:velocityerp.top #修改hosts文件 vi ...


    前言

    本文介绍LNMP环境下nginx配置,实现域名访问及有关nginx配置问题详解,关于linux环境下nginx的安装可以参考centos7 搭建 php7.1.3+mysql5.7+nginx1.11


    更改hosts文件

    设置要访问的本地域名,比如:velocityerp.top

    #修改hosts文件
    vi /etc/hosts
    #如下 增加127.0.0.1 velocityerp.top
    127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4
    ::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
    
    127.0.0.1 velocityerp.top
    

    新增velocityerp.top.conf配置文件

    在/usr/local/nginx/conf/vhosts下(每个人安装路径可能不一样)新建velocityerp.top.conf文件,内容如下(一般没什么特殊要求按如下配置即可)

    server {
    	listen        80;  #侦听端口
    	server_name  velocityerp.top; #网站域名
    	root   "/mnt/hgfs/project/www/erp/public"; #代码地址
    	location / {
    		index index.php index.html error/index.html; 
    		if (!-e $request_filename) { # 如果请求的路径找不到,则nginx执行下面的复写
    			rewrite  ^(.*)$  /index.php?s=/$1  last; #意思是假如访问www.baidu.com/test.html,如果找不到,就跳转到www.baidu.com/index.php/test.html,可用于配置访问路径省略index.php
    			break;
    		}
    	}
    	location ~ \.php(.*)$ { # 匹配所有以.php结尾的请求 区分大小写
    		fastcgi_pass   127.0.0.1:9000;  #侦听本地9000端口,php-fpm
    		fastcgi_index  index.php; #如果请求url以'/'结尾,则在后面追加index.php,在这里设置其实不生效,以为前面已经限制以.php结尾的请求,习惯用法
    		fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$; #非贪婪匹配
    		fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name; #在浏览器中访问的.php文件,实际读取的是 $document_root(网站根目录)下的.php文件 -- 也就是说当访问127.0.0.1/index.php的时候,需要读取网站根目录下面的index.php文件
    		fastcgi_param  PATH_INFO  $fastcgi_path_info; # 脚本请求的值
    		fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info; #解析
    		include        fastcgi_params;
    	}
    }
    

    重启nginx

    service nginx restart
    

    本地访问 velocityerp.top即可

    nginx配置header参数(解决跨域),接口方配置

    server {
        listen        80;
        server_name  api.velocitypublic.top;
        root   "/mnt/hgfs/project/www/velocitypublic-api/public";
        add_header 'Access-Control-Allow-Origin' '*'; #允许的请求来源,* 为所有
        add_header 'Access-Control-Allow-Credentials' 'true' ; #是否允许浏览器后续请求携带认证信息(cookies),该值只能是true,如果服务器不要浏览器发送Cookie,删除该字段即可。
        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,Keep-Alive,X-Requested-With,Pragma,Cache-Control,If-Modified-Since,token'; #浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。
        add_header 'Access-Control-Max-Age' 1728000; 该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求
        location / {
            index index.php index.html error/index.html;
            if (!-e $request_filename) {
                rewrite  ^(.*)$  /index.php?s=/$1  last;
                break;
            }
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
    }
    

    nginx反向代理(解决跨域),发送方配置

    server {
    	listen        80;
    	server_name  tp5.top;
    	root   "/mnt/hgfs/project/www/tp5/public";
    	location / {
    		index index.php index.html error/index.html;
    		if (!-e $request_filename) {
    			rewrite  ^(.*)$  /index.php?s=/$1  last;
    			break;
    		}
    	}
    	location ~ \.php(.*)$ {
    		fastcgi_pass   127.0.0.1:9000;
    		fastcgi_index  index.php;
    		fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
    		fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    		fastcgi_param  PATH_INFO  $fastcgi_path_info;
    		fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
    		include        fastcgi_params;
    	}
    
    	location /api {
                proxy_pass   http://api.velocitypublic.top/index.php/api/auth/sliding_code; # 解决跨域,访问tp5.top/api 会代理到api.velocitypublic.top域名下,绕过浏览器同源策略检测
            }
    }
    

    nginx端口转发(解决跨域)

    server {
    	listen        80;
    	server_name  tp5.top;
    	root   "/mnt/hgfs/project/www/tp5/public";
    	location / {
    		index index.php index.html error/index.html;
    		if (!-e $request_filename) {
    			rewrite  ^(.*)$  /index.php?s=/$1  last;
    			break;
    		}
    	}
    	location ~ \.php(.*)$ {
    		fastcgi_pass   127.0.0.1:9000;
    		fastcgi_index  index.php;
    		fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
    		fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    		fastcgi_param  PATH_INFO  $fastcgi_path_info;
    		fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
    		include        fastcgi_params;
    	}
        location /api/ {
                # 把 /api 路径下的请求转发给真正的后端服务器
                proxy_pass http://localhost:189/;
    
                # 把host头传过去,后端服务程序将收到your.domain.name, 否则收到的是localhost:189
                proxy_set_header Host $http_host;
    
                # 把cookie中的path部分从/api替换成/service
                proxy_cookie_path /api /;
    
                # 把cookie的path部分从localhost:189替换成your.domain.name
                proxy_cookie_domain localhost:189 rampow.top;
    
                # 获取用户真实ID
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    

    nginx内部跳转

    server {
    	listen        80;
    	server_name  tp5.top;
    	root   "/mnt/hgfs/project/www/tp5/public";
    	location / {
    		index index.php index.html error/index.html;
    		if (!-e $request_filename) {
    			rewrite  ^(.*)$  /index.php?s=/$1  last;
    			break;
    		}
    	}
    	location ~ \.php(.*)$ {
    		fastcgi_pass   127.0.0.1:9000;
    		fastcgi_index  index.php;
    		fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
    		fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    		fastcgi_param  PATH_INFO  $fastcgi_path_info;
    		fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
    		include        fastcgi_params;
    	}
    	location ^~ /api {
            alias   /mnt/hgfs/project/www/wms_api/public; #目录别名,root与alias主要区别在于nginx如何解释location后面的uri,这会使两者分别以不同的方式将请求映射到服务器文件上。
    root的处理结果是:root路径+location路径
    alias的处理结果是:使用alias路径替换location路径
            if (!-e $request_filename) {
                 rewrite ^ /api/index.php last;
            }
        }
    }
    

    nginx配置优先级详解

    匹配优先级:精确匹配 >(^~) > 正则匹配 > 字符串(长 > 短)
    
    = 精确匹配;
    ^~ 提高前缀字符串的匹配优先级;
    ~ 区分大小写的正则表达式匹配;
    ~* 不区分大小写的正则表达式匹配;
    / 通用匹配(因为所有的地址都以 / 开头,所以这条规则将匹配到所有请求),如果没有其它匹配,任何请求都会匹配到。
    
    
    # 举例
    location = /test.png {
        # 精确匹配
        [ configuration A ] 
    }
    
    location / {
        # 通用匹配,但是正则表达式和最长字符串会优先被匹配
        [ configuration B ] 
    }
    
    location /documents/ {
        # 前缀字符串匹配
        # 匹配任何以 /documents/ 开头的请求
        # 只有后面的正则表达式没有匹配到时,该配置才会被采用
        [ configuration C ] 
    }
    
    location ^~ /images/ {
        # 前缀字符串匹配
        # 匹配任何以 /images/ 开头的请求,匹配成功以后,会停止搜索后面的正则表达式匹配
        [ configuration D ] 
    }
    
    location ~* \.(gif|jpg|jpeg)$ {
        # 正则表达式匹配,匹配所有以 gif,jpg,jpeg 结尾的请求
        # 然而,所有请求 /images/ 下的图片会被 configuration D 处理,因为 ^~ 指令,匹配不到这一条规则
        [ configuration E ] 
    }
    
    location /images/abc/ {
        # 前缀字符串匹配
        # 只有去掉 configuration D 才能被匹配到
        [ configuration F ] 
    }
    

    扫描下方二维码,关注”勇康博客网“公众号,获取更多内容

    展开全文
  • nginx跨域配置步骤

    千次阅读 2021-01-21 09:52:00
    2、找到nginx的压缩目录,修改conf/nginx.conf文件的配置,参考如下: ​ 注:需要将proxy_pass 这里的地址改为接口服务器地址 其中‘api’代表包含有api的地址才会映射到这个接口服务器地...
  • Nginx 跨域配置支持

    千次阅读 2022-04-08 10:17:14
    Nginx 跨域配置支持
  • 本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 问题描述 今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字体的路径加载...
  • nginx跨域问题解决方案

    千次阅读 2022-03-02 11:39:35
    1.需要设置访问白名单 map $host $app_data { default "-"; } map $http_origin $corsHost { default 0; "~http://comment.test.com.cn" http://comment.test.com.cn; "~...
  • vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见下文。 1. 首先给vue项目加上跨域【使用...
  • Nginx跨域的解决方法

    千次阅读 2020-07-18 13:41:08
    Nginx跨域问题跨域问题产生的原因同源的目的Nginx解决跨域问题反向代理Cookie跨域问题 博主开发了一个动静分离的博客,动静分离免不了静态资源和后台代码的部署,静态资源管理我用的是Nginx反向代理服务器。选择...
  • 宝塔面板nginx跨域配置(跳坑)

    千次阅读 2021-07-27 16:30:31
    问题:使用前后端分离开发项目,后端使用tp5,前端使用vue,已给后端tp5的入口文件配置跨域操作,但前端无法访问后端静态资源文件,因为访问静态资源文件不经过入口文件public目录下的index.php,所以本人就反其道而...
  • Nginx跨域配置详解

    千次阅读 2020-09-18 01:00:01
    到此目录下,start ningx 就可以启动了 启动后如下: conf都是配置的,点进去有一个nginx.conf就可以配置相关内容了 四、跨域配置 前端代码,访问的时候要用服务器的地址,我这里用的是http-server 发送请求OK...
  • nginx跨域原理

    2021-07-28 19:58:00
    什么是跨域 从某一个域请求其他域的... 第三步后台把消息拿到回给nginx,nginx这个时候看他需要不需要跨域,如果跨域,这个问题给它不能用,需要解决跨域,所以要返回4个头 nginx代理后台 代理前端 不需要跨域...
  • 一、nginx跨域 1 . 什么是跨域? 跨源资源共享(CORS)是一种机制,它使用额外的HTTP标头让用户代理获得访问来自不同来域的服务器上选定资源的权限,而不是使用当前正在使用的站点。用户代理在请求来自与当前文档不同...
  • Nginx跨域问题解决 这块内容,我们主要从以下方面进行解决: 什么情况下会出现跨域问题? 实例演示跨域问题 具体的解决方案是什么? 同源策略 浏览器的同源策略:是一种约定,是浏览器最核心也是最基本的安全...
  • nginx跨域反向代理返回404

    千次阅读 2022-01-24 16:16:58
    记录一次nginx跨域反向代理返回404的问题 云服务器之前是这样配置的 server { listen 8081; server_name localhost; location / { root /opt/project1_html; try_files $uri $uri/ /index.html; } ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,762
精华内容 11,104
关键字:

nginx跨域