开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

nginx多个域名跨域

基础概念

Nginx 是一个高性能的 HTTP 和反向代理服务器，也用作邮件代理服务器。跨域是指浏览器为了安全考虑，限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。跨域问题通常发生在前端应用尝试访问不同域名下的后端服务时。

相关优势

高性能：Nginx 能够处理高并发请求，提供高效的负载均衡。
灵活性：通过配置文件，可以轻松实现复杂的路由规则和反向代理。
安全性：支持多种安全机制，如 SSL/TLS 加密、IP 过滤等。

类型

简单请求：包括 GET、POST、HEAD 等方法，浏览器会直接发送请求。
预检请求：对于复杂请求（如 PUT、DELETE 等），浏览器会先发送一个 OPTIONS 请求进行预检。

应用场景

前端开发：前端应用通常部署在不同的域名下，需要访问后端服务。
API 网关：作为 API 网关，处理来自不同域名的请求并转发到相应的后端服务。

问题及解决方法

问题：Nginx 多个域名跨域配置

假设我们有两个域名 domain1.com 和 domain2.com，它们都需要访问 backend.com 的资源。

原因

浏览器的同源策略限制了不同域名之间的直接访问。

解决方法

在 Nginx 配置文件中添加跨域相关的头信息。以下是一个示例配置：

server {
    listen 80;
    server_name domain1.com;

    location / {
        proxy_pass http://backend.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 跨域配置
        add_header 'Access-Control-Allow-Origin' 'http://domain1.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

server {
    listen 80;
    server_name domain2.com;

    location / {
        proxy_pass http://backend.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 跨域配置
        add_header 'Access-Control-Allow-Origin' 'http://domain2.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

解释

add_header：添加跨域相关的头信息。
Access-Control-Allow-Origin：允许访问的源。
Access-Control-Allow-Methods：允许的 HTTP 方法。
Access-Control-Allow-Headers：允许的请求头。
Access-Control-Allow-Credentials：是否允许发送 Cookie。
if ($request_method = 'OPTIONS')：处理预检请求，返回 204 No Content。

参考链接

通过以上配置，domain1.com 和 domain2.com 就可以顺利地访问 backend.com 的资源，解决了跨域问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

nginx前端跨域_nginx实现跨域

做前端开发的时候，使用nginx代理，如果我们当前的域名与请求接口的域名不在同一个域名下时，会有跨域问题打开nginx.conf文件打开Finder -前往-前往文件夹 /usr/local/etc.../nginx Jetbrains全家桶1年46，售后保障稳定一般默认在这个目录下打开nginx.conf之后，增加一个location 如下： location /test {...重启nginx sudo nginx -s reload 就解决了跨域问题了。版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

3.3K2 0

nginx rewrite 跨域

1.rewrite指令 rewrite 指令语法： rewrite regex replacement [flag]; 作用域：server 、location、if 功能：如果一个URI匹配指定的正则表达式...针对情况1，如果访问url = http://server/html/test.jsp，则被nginx代理后，请求路径会便问http://proxy_pass/html/test.jsp，将html/...针对情况2，如果访问url = http://server/html/test.jsp，则被nginx代理后，请求路径会变为 http://proxy_pass/test.jsp，直接访问server的根资源

2.6K1 0

nginx解决跨域

proxy_set_header X-Real-Ip $remote_addr; #proxy_set_header X-Forwarded-For $remote_addr; #指定允许跨域的方法...3600; #不带cookie请求，并设置为false add_header Access-Control-Allow-Credentials false; #表示允许这个域跨域调用...（客户端发送请求的域名和端口） #$http_origin动态获取请求客户端请求的域不用*的原因是带cookie的请求不支持*号 add_header Access-Control-Allow-Origin

5171 0

nginx处理跨域

最近从mac转成用window来开发，在安装nginx的时候碰了下钉子，那我就不开心了。...想着既然都安装好了，那么就搞点事情吧~ window上安装nginx 简单讲下在window上安装nginx~ 下载软件并安装通过download下载你需要的版本，我这里下载了稳定版本nginx/Windows...启动：nginx 启动之后就可以在localhost:80访问你的项目了，前提是你的80端口没有被占用停止快速停止：nginx -s stop 优雅停止：nginx -s quit 重新加载：nginx...：在任务管理器中手动移除nginx占用的进程执行tasklist /fi "imagename eq nginx.exe"找出nginx占用的进程映像名称...注意：有时候移除了占用的PID后还是不行，那重启下电脑~ 启动nginx后，在浏览器上输入localhost你会看到其成功启动的页面跨域问题对于跨域的概念就不详细说了...

2.7K2 0

nginx跨域访问配置_cors跨域访问不了

跨域概念简单来说：两个url只要协议、域名、端口有任何一个不同，都被当作是不同的域，相互访问就会有跨域问题。...：在开发前后端完全分离的系统中，服务端代码属于一个工程，前端代码属于另一个工程，前端开发人员在进行接口对接时，可能会在webstorm等工具进行编码，并用webstorm的内置服务器进行调试，这就会有跨域问题...，因为，webstorm内置服务器默认前缀部分是http://localhost:63342/，而服务端接口的路径前缀部分一定不会是这样，这样便产生了跨域访问的问题。...$("text").html(JSON.stringify(text)) } }) 直接访问，打开浏览器的控制台查看，没错，提示的正是无法进行跨域访问...这次的请求其实是走了nginx代理服务器的总结 nginx的实际原理就是配置一个代理路径替换实际的访问路径，使得浏览器认为访问的资源都是属于相同协议，域名和端口的，而实际访问的并不是代理路径，而是通过代理路径找到实际路径进行访问

4.5K4 0

Nginx 设置cors跨域

在我们的开发中，经常遇到跨域，这个时候，可以通过cors来解决。解决的方法可以在服务端的代码层或者在web服务器进行设置在web服务器上进行设置cors 跨域，这样就不必改动代码。...以nginx为例子提示：有时候我们的后端是PHP文件，则需要把跨域的代码加 location ~ \.php(.*)$ 中。...add_header 'Content-Length' 0; return 200; } # 这下面是要被代理的后端服务器，它们就不需要修改代码来支持跨域了

2.4K4 0

nginx支持跨域访问

1,进入nginx的html目录 vim ..../crossdomain.xml 具体路径: /usr/local/nginx/html/crossdomain.xml 2,在crossdomain.xml中添加: <?...注意:默认/usr/local/nginx/html/crossdomain.xml 是不存在的. nginx做请求转发修改:/usr/local/etc/nginx/vhosts/xx.com.conf

3.7K8 0

Nginx配置跨域响应头解决跨域问题

en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes...auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules....See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections...500 502 503 504 /50x.html; location = /50x.html { } } } 主要看server部分，对所有路径添加了跨域响应头...原本部署在docker上，配置文件挂载在外部，但是未生效（检查过挂载已成功），原因未知，最终将nginx安装在宿主机上才行。

4.5K3 1

nginx跨域问题纪录

问题之前在公司内部的一后台界面，所有的视频都无法播放，浏览器抓包，从报错信息看是跨域问题导致，这里就简单纪录下跨域由于javascript的同源策略的限制问题，导致a.com域名下的js无法操作b.com...域名下的对象，所谓同源是指相同的协议，例如http或者https，若相同即为同源。...同源包括：相同协议，相同域名，端口常见跨域类型名词解释 CORS 跨域资源共享，当前几乎所有的浏览器都可以通过跨域资源共享的协议支持ajax跨域调用，CORS 标准定义了一组新的 HTTP header...，这组 header 给浏览器和服务器提供了一种判断跨域请求是否何法的依据。...表示是否允许发送Cookie，如果在CORS请求中不包含Cookie，则设为 true，否则删掉该字段 Access-Control-Allow-Headers 在跨域访问时，XMLHttpRequest

1.4K2 0

(CORS) Nginx配置跨域

网站配置文件server 添加以下即可location / { add_header Access-Control-Allow-Origin *;add_he...

1.4K1 0

nginx代理配置跨域

nginx代理部署项目后，前端vue请求接口api的时候出现在跨域报错报错信息如下： Access to XMLHttpRequest at 'http://localhost:85/api/login...解决方案：在nginx配置文件中添加如下代码： if ($request_method = 'OPTIONS') { set $cors "isreqoptions"; }

1.6K5 0

nginx配置跨域访问,无法生效_页面跨域访问

即会出现跨域请求禁止。...通俗一点说就是如果存在协议、域名、端口或者子域名不同服务端，或一者为IP地址，一者为域名地址（在跨域问题上，域仅仅是通过”url的首部”来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个...IP），之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。...需要服务器设置header：Access-Control-Allow-Origin 4.Nginx反向代理可以不需要目标服务器配合，不过需要Nginx中转服务器，用于转发请求（服务端之间的资源请求不会有跨域限制...） Nginx跨域访问解决方案使用Ajax跨域请求资源，Nginx作为代理，出现以下错误： The 'Access-Control-Allow-Origin' header contains multiple

7.4K2 0

CORS跨域与Nginx反向代理跨域优劣对比

最近写了一些关于前后端分离项目之后，跨域相关方案的基本原理和常见误区的帖子，主要包括CORS和Nginx反向代理。...Nginx反向代理：此时前端相当于不跨域，和正常请求一致，无需额外配置。...Nginx反向代理：此时后端相当于不跨域，和正常请求一致，无需额外配置。服务器配置 CORS方案：无。...Nginx反向代理：该方案跨域工作都集中在nginx服务器上，配置如下 ... proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-Port...原理移步nginx反向代理跨域基本配置与常见误区、nginx配置解析之客户端真实IP的传递安全性 CORS方案：由于此时浏览器会默认添加origin属性，服务端可以直接查到请求来源，便于控制来源、屏蔽黑名单链接

2.6K2 0

nginx+tomcat单个域名及多个域名配置

这类分布式的系统，一般也都会用到nginx来做负载均衡。...nginx做负载均衡的优势网上有很多介绍资料，这里我不再多做介绍。因为有很多系统要部署，涉及到域名、二级域名、多个域名等的部署。...在实际的部署由于对nginx的不够熟悉，遇到过很多坑，其中这种多域名的配置，xxxx.com转发到www.xxxx.com、访问域名转发到tomcat里的项目等，现在先总结一部坑的解决办法。...的基本配置大致就是这样，如果绑定多个域名（不管是一级域名还是二级域名），需配置多个server，你会发现这几个server配置都差不多，主要是更改server_name及proxy_pass指向即可。...如果此时访问域名，你会发现nginx的配置生效了，只是目前显示的是tomcat的默认界面。nginx的配置基本就这样了，接下来对tomcat做些配置的修改。

5.1K6 0

nginx跨域解决方案

自有服务器如果服务器是自己的，那么则可以修改web服务环境的配置文件操作如下：配置nginx.conf配置文件的location / {}中添加以下内容 # 设置允许跨域的源，这里使用通配符 * 表示接受任何源的请求...，也可以根据需要设置为具体的域名 add_header Access-Control-Allow-Origin '*' always; # 允许跨域请求中携带Cookie信息 add_header Access-Control-Allow-Credentials...'true' always; # 指定允许跨域请求的方法，包括GET、POST、OPTIONS和PUT add_header Access-Control-Allow-Methods 'GET, POST...此时，浏览器将以临时关闭同源策略的方式运行，允许跨域请求。注意：这种方法仅适用于本地开发环境，不应在生产环境中禁用同源策略，因为它会降低浏览器的安全性。...在实际部署项目时，请务必在服务器端正确配置跨域支持。

3.1K1 0

SpringBoot 与 Nginx跨域配置

SpringBoot跨域配置我们的后端使用Spring Boot。Spring Boot跨域非常简单，只需书写以下代码即可。...跨域配置某天，我们将Spring Boot应用用Nginx反向代理。...而前端跨域请求的需求不减，于是乎。 Nginx跨域也比较简单，只需添加以下配置即可。...B.T.W，阿里云中文档描述到Nginx也可通过crossdomain.xml配置文件跨域，不过笔者并未采用这种方式。...Chrome、Firefox本身是可以通过配置支持跨域请求的。

1.5K2 0

nginx+tomcat单个域名及多个域名配置

这类分布式的系统，一般也都会用到nginx来做负载均衡。...nginx做负载均衡的优势网上有很多介绍资料，这里我不再多做介绍。因为有很多系统要部署，涉及到域名、二级域名、多个域名等的部署。...在实际的部署由于对nginx的不够熟悉，遇到过很多坑，其中这种多域名的配置，xxxx.com转发到www.xxxx.com、访问域名转发到tomcat里的项目等，现在先总结一部坑的解决办法。...的基本配置大致就是这样，如果绑定多个域名（不管是一级域名还是二级域名），需配置多个server，你会发现这几个server配置都差不多，主要是更改server_name及proxy_pass指向即可。...如果此时访问域名，你会发现nginx的配置生效了，只是目前显示的是tomcat的默认界面。nginx的配置基本就这样了，接下来对tomcat做些配置的修改。

5.4K0 0

有关于Nginx跨域问题

项目中使用Nginx服务实现文件的访问，由于和tomcat的接口不是一个域，前端VUE做了图片处理，导致出现跨域问题 location /file { alias /kjc;...add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Credentials true; } 添加跨域配置

8961 0

使用nginx解决跨域请求

一遇到到下这种问题，大家是不是很头疼，没错，这就是跨域问题，首先我们先说一下什么是跨域？为什么会跨域？什么问题造成的？...跨域简单来说，就是浏览器url地址和访问数据接口的地址端口或域名不一致造成的。只需要让前端页面和后端程序放到一块使用同一个域名和同一个端口即可解决，正好使用nginx可以解决此问题。...nginx下载地址：https://pan.baidu.com/s/1VbXmRPi_Sjna-jVacjMBFg 提取码: adsu 下载后解压打开，修改conf文件下的nginx.conf文件，找到...root C:/Users/tongyao/Desktop; error_page 405 =200 $uri; } 图中我把前端页面放到一个名为web的文件夹到桌面了，然后保存，点击nginx...根目录的nginx.exe双击运行然后通过任务管理器查看是否启动成功。

1.7K2 0

014.Nginx跨域配置

但若同一个公司内部存在多个不同的子域，子域之间需要互访，此时可通过跨域进行实现。跨域可通过JSONP和CORS进行实现。...(推荐) 配置多个域名在map中只有配置过的允许跨域： 1 map $http_origin $corsHost { 2 default 0; 3 "~https...4.3 多域名配置方法一场景：允许来自source01.odocker.com和source02.odocker.com的应用，即允许多个域名跨域访问corsmulti01.linuxds.com上的资源...4.5 多域名配置方法二场景：允许来自localhostsource01.odocker.com或source02.odocker.com的应用，即允许多个域名跨域访问corsmulti02.linuxds.com...4.7 多域名配置方法三场景：允许来自*.odocker.com的应用，即允许多个域名跨域访问corsmulti03.linuxds.com上的资源。

6.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭