摘要:浏览器一般默认会禁止跨域访问。因为不安全,容易出现跨站请求伪造攻击。二控制浏览器允许跨域访问通过添加等头信息的方式控制浏览器缓存。
一、什么是跨域
跨域是指从一个域名的网页去请求另一个域名的资源。比如从 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" 设置允许发起跨域请求的网站ngx_http_headers_module 语法
"Access-Control-Allow-Methods" 设置允许发起跨域请求请求的HTTP方法
"Access-Control-Allow-Headers" 设置允许跨域请求包含 Content-Type头
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
Ajax跨站访问b Ajax跨站访问b -
/vagrant/c/index.html
4. 配置客户端的hosts文件(使用真是域名的可以忽略)Ajax跨站访问c Ajax跨站访问c -
windows: C:WindowsSystem32driversetchosts
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.com5. 浏览器分别访问 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.
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/40037.html
摘要:浏览器一般默认会禁止跨域访问。因为不安全,容易出现跨站请求伪造攻击。二控制浏览器允许跨域访问通过添加等头信息的方式控制浏览器缓存。 一、什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.a.com 页面去请求 www.b.com 的资源。 showImg(https://segmentfault.com/img/remote/1460000015873212?...
摘要:浏览器一般默认会禁止跨域访问。因为不安全,容易出现跨站请求伪造攻击。二控制浏览器允许跨域访问通过添加等头信息的方式控制浏览器缓存。 一、什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.a.com 页面去请求 www.b.com 的资源。 showImg(https://segmentfault.com/img/remote/1460000015873212?...
摘要:技术的学习也是如此唯有实践才能更清楚的明白原理和加深印象,因此本文会利用对前端的各种跨域方式进行实践,强烈建议一步一步跟着做,相信你肯定会对跨域有更深层次的理解。 前言 常言道,读万卷书,不如行万里路。技术的学习也是如此,唯有实践才能更清楚的明白原理和加深印象,因此本文会利用node.js对前端的各种跨域方式进行实践,强烈建议一步一步跟着做,相信你肯定会对跨域有更深层次的理解。而由于篇...
阅读 4072·2021-09-22 15:34
阅读 2732·2021-09-22 15:29
阅读 461·2019-08-29 13:52
阅读 3285·2019-08-29 11:30
阅读 2223·2019-08-26 10:40
阅读 785·2019-08-26 10:19
阅读 2189·2019-08-23 18:16
阅读 2264·2019-08-23 17:50