This article introduces to you how Nginx implements cross-domain access? The implementation of Nginx cross-domain access has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is cross-domain

Cross-domain refers to requesting resources of another domain name from a web page of one domain name. For example, request the resources of www.b.com from the www.a.com page.

#Browsers generally prohibit cross-domain access by default. Because it is insecure, it is prone to CSRF (cross-site request forgery) attacks.

2. Nginx controls the browser to allow cross-domain access

Nginx adds HTTP such as Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, etc. header information to control browser caching.

"Access-Control-Allow-Origin" Set the website that is allowed to initiate cross-domain requests
"Access-Control-Allow-Methods" Set the HTTP methods that are allowed to initiate cross-domain requests
"Access -Control-Allow-Headers" setting allows cross-domain requests to include Content-Type headers

ngx_http_headers_module

Syntax

Syntax: add_header name value [always]; Default: — Context: http, server, location, if in location

Application example

1. vim conf.d/cross_site.conf

# 配置网站www.a.com server { server_name www.a.com; root /vagrant/a; # 允许 http://www.b.com 使用 GET,POST,DELETE HTTP方法发起跨域请求 add_header Access-Control-Allow-Origin http://www.b.com; add_header Access-Control-Allow-Method GET,POST,DELETE; } # 配置网站www.b.com server { server_name www.b.com; root /vagrant/b; } # 配置网站www.c.com server { server_name www.c.com; root /vagrant/c; }

2. nginx -s reload Reload nginx configuration file

3. Create/vagrant/a/a.txt,/vagrant/b/index.html,/vagrant/c/index .htmlfile

• ##vim /vagrant/a/a.txt

Hello,I'm a!

• / vagrant/b/index.html

nbsp;html>   
Ajax跨站访问b - 
  

• /vagrant/c/index.html

nbsp;html>   
Ajax跨站访问c - 
  

4. Configure the client’s hosts file (if you use a real domain name, you can ignore it)

C:\Windows\System32\drivers\etc\hostslinux:
/etc/hosts

192.168.33.88 www.a.com 192.168.33.88 www.b.com 192.168.33.88 www.c.com

5. The browser accesseshttp://www.b.com/index.htmlandhttp://www.c.com/index.html# respectively.

##http://www.b.com/index.html

• Ajax跨站访问b - Hello,I'm a!

  Copy after login

http://www.c .com/index.html

• Ajax跨站访问c - 请求失败！

  Copy after login
Open the developer mode Console of the browser, and you can also find an error on the page http://www.c.com/index.html:

Failed to load http://www.a.com/a.txt: The 'Access-Control-Allow-Origin' header has a value 'http://www.b.com' that is not equal to the supplied origin. Origin 'http://www.c.com' is therefore not allowed access.

Recommended related articles:

The above is the detailed content of How does Nginx implement cross-domain access? Implementation of Nginx cross-domain access. For more information, please follow other related articles on the PHP Chinese website!