Nginx如何实现跨域访问?Nginx跨域访问的实现
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Nginx如何实现跨域访问?Nginx跨域访问的实现,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3151字,纯文字阅读大概需要5分钟。
内容图文
![Nginx如何实现跨域访问?Nginx跨域访问的实现](/upload/InfoBanner/zyjiaocheng/133/c59555b736de47b2adc9af33ebbe5d92.jpg)
一、什么是跨域
跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.a.com 页面去请求 www.b.com 的资源。
浏览器一般默认会禁止跨域访问。因为不安全,容易出现 CSRF(跨站请求伪造)攻击。
二、Nginx控制浏览器允许跨域访问
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头
ngx_http_headers_module
语法
Syntax: add_header name value [always]; Default: — Context: http, server, location, if in location
应用实例
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 重新载入nginx配置文件
3. 创建 /vagrant/a/a.txt
、/vagrant/b/index.html
、/vagrant/c/index.html
文件
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>
4. 配置客户端的hosts文件(使用真是域名的可以忽略)
windows: C:\Windows\System32\drivers\etc\hosts
linux: /etc/hosts
添加如下内容,并保存(192.168.33.88为笔者虚拟机的IP,需自行替换为自己的IP):
192.168.33.88 www.a.com 192.168.33.88 www.b.com 192.168.33.88 www.c.com
5. 浏览器分别访问 http://www.b.com/index.html
和 http://www.c.com/index.html
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跨域访问的实现的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的Nginx如何实现跨域访问?Nginx跨域访问的实现全部内容,希望文章能够帮你解决Nginx如何实现跨域访问?Nginx跨域访问的实现所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。