Nginx如何实现跨域访问？Nginx跨域访问的实现

跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.a.com 页面去请求 www.b.com 的资源。

浏览器一般默认会禁止跨域访问。因为不安全，容易出现 CSRF（跨站请求伪造）攻击。

Nginx通过添加 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等HTTP头信息的方式控制浏览器缓存。

Access-Control-Allow-Origin 设置允许发起跨域请求的网站
Access-Control-Allow-Methods 设置允许发起跨域请求请求的HTTP方法
Access-Control-Allow-Headers 设置允许跨域请求包含 Content-Type头

Syntax: add_header name html' target='_blank'>value [always];Default: —Context: http, server, location, if in location

# 配置网站www.a.comserver { 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.comserver { server_name www.b.com; root /vagrant/b;# 配置网站www.c.comserver { server_name www.c.com; root /vagrant/c;}

vim /vagrant/a/a.txt

Hello,I m a!

/vagrant/b/index.html

 !DOCTYPE html  html lang= en  head  meta charset= utf-8  title Ajax跨站访问b /title  /head  body  h1 Ajax跨站访问b - /h1  /body  script src= http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js /script  script  $(function(){ $.ajax({ url: http://www.a.com/a.txt , type: GET , success: function (data) { $( h1 ).append(data); error: function (data) { $( h1 ).append( 请求失败！  /script  /html 

/vagrant/c/index.html

 !DOCTYPE html  html lang= en  head  meta charset= utf-8  title Ajax跨站访问c /title  /head  body  h1 Ajax跨站访问c - /h1  /body  script src= http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js /script  script  $(function(){ $.ajax({ url: http://www.a.com/a.txt , type: GET , success: function (data) { $( h1 ).append(data); error: function (data) { $( h1 ).append( 请求失败！  /script  /html 

windows: C:/Windows/System32/drivers/etc/hosts
linux: /etc/hosts

添加如下内容，并保存（192.168.33.88为笔者虚拟机的IP，需自行替换为自己的IP）：

192.168.33.88 www.a.com192.168.33.88 www.b.com192.168.33.88 www.c.com

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

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

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

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

打开浏览器的开发者模式Console，还可以发现 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.

相关文章推荐：

Nginx作为静态资源web服务来控制浏览器缓存以及实现防盗链

Nginx作为静态资源web服务并进行静态资源压缩

以上就是Nginx如何实现跨域访问？Nginx跨域访问的实现的详细内容，PHP教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。