资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Nginx实践篇（3）- 跨域访问

Nginx实践篇（3）- 跨域访问

Forelax / 674人阅读

摘要：浏览器一般默认会禁止跨域访问。因为不安全，容易出现跨站请求伪造攻击。二控制浏览器允许跨域访问通过添加等头信息的方式控制浏览器缓存。

一、什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源。比如从 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



    
        
        Ajax跨站访问b
    
    
        
Ajax跨站访问b -

/vagrant/c/index.html



    
        
        Ajax跨站访问c
    
    
        
Ajax跨站访问c -

4. 配置客户端的hosts文件（使用真是域名的可以忽略）

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.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.
云服务器 GPU云服务器 nginx服务器跨域 跨域访问 申请跨域访问 jquery跨域访问

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/8084.html

相关文章

  • Nginx实践篇（3）- 跨域访问

    摘要：浏览器一般默认会禁止跨域访问。因为不安全，容易出现跨站请求伪造攻击。二控制浏览器允许跨域访问通过添加等头信息的方式控制浏览器缓存。 一、什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.a.com 页面去请求 www.b.com 的资源。 showImg(https://segmentfault.com/img/remote/1460000015873212?...

    twohappy 评论0 收藏0

  • Nginx实践篇（3）- 跨域访问

    摘要：浏览器一般默认会禁止跨域访问。因为不安全，容易出现跨站请求伪造攻击。二控制浏览器允许跨域访问通过添加等头信息的方式控制浏览器缓存。 一、什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.a.com 页面去请求 www.b.com 的资源。 showImg(https://segmentfault.com/img/remote/1460000015873212?...

    王岩威 评论0 收藏0

  • 「跨域」利用node.js实践前端各种跨域方式（下）

    摘要：技术的学习也是如此唯有实践才能更清楚的明白原理和加深印象，因此本文会利用对前端的各种跨域方式进行实践，强烈建议一步一步跟着做，相信你肯定会对跨域有更深层次的理解。 前言 常言道，读万卷书，不如行万里路。技术的学习也是如此,唯有实践才能更清楚的明白原理和加深印象，因此本文会利用node.js对前端的各种跨域方式进行实践，强烈建议一步一步跟着做，相信你肯定会对跨域有更深层次的理解。而由于篇...

    Jenny_Tong 评论0 收藏0

  • Nginx

    摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备） 前端工程师学习 Nginx ...

    syoya 评论0 收藏0

发表评论

登陆后可评论

0条评论

Forelax

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<