0

0

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

不言

不言

发布时间:2018-08-06 11:47:17

|

7523人浏览过

|

来源于php中文网

原创

这篇文章给大家介绍的内容是关于nginx如何实现跨域访问?nginx跨域访问的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、什么是跨域

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

1632036096-5b63d6128c8fe_articlex.jpg

浏览器一般默认会禁止跨域访问。因为不安全,容易出现 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:\Windows\System32\drivers\etc\hosts
linux: /etc/hosts

SOAP语法 word版
SOAP语法 word版

SOAP、WSDL(WebServicesDescriptionLanguage)、UDDI(UniversalDescriptionDiscovery andIntegration)之一, soap用来描述传递信息的格式, WSDL 用来描述如何访问具体的接口, uddi用来管理,分发,查询webService 。具体实现可以搜索 Web Services简单实例 ; SOAP 可以和现存的许多因特网协议和格式结合使用,包括超文本传输协议(HTTP),简单邮件传输协议(SMTP),多用途网际邮件扩充协议

下载

添加如下内容,并保存(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.htmlhttp://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服务并进行静态资源压缩

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
进程与SOCKET
进程与SOCKET

共6课时 | 0.3万人学习

前端Vue3实战【手写vue项目】
前端Vue3实战【手写vue项目】

共9课时 | 1.0万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号