1 什么是跨域请求

跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。

举个例子：假如一个域名为aaa.cn的网站，它发起一个资源路径为aaa.cn/books/getBookInfo的 Ajax 请求，那么这个请求是同域的，因为资源路径的协议、域名以及端口号与当前域一致（例子中协议名默认为http，端口号默认为80）。但是，如果发起一个资源路径为bbb.com/pay/purchase的 Ajax 请求，那么这个请求就是跨域请求，因为域不一致，与此同时由于安全问题，这种请求会受到同源策略限制。

2.常见跨域情况

网络协议不同，如http协议访问https协议 ;
端口不同，如80端口访问8080端口 ;
域名不同，如www.test1.com访问www.test2.com ;
子域名不同，如abc.test1.com访问def.test1.com ;

3 nginx跨域示例演示

准备一个nginx服务器，配置为

server {
listen 80; # 监听的端⼝
server_name www.zwx.com; # 域名或ip
location / { # 访问路径配置
root /usr/share/nginx/html;# 根⽬录
index index.html index.htm; # 默认⾸⻚
}
error_page 500 502 503 504 /50x.html; # 错误⻚⾯
location = /50x.html {
root html;
}
}

在html目录里有一个wel.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>nginx-cors-test</title>
</head>
<body>
<div>nginx跨域请求测试</div></body></html>

然后启动一个springboot应用，或者tomcat也可以，访问一个html页面

wel1.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>nginx-cors-test</title>
</head>
<body>
<button type="button" onclick="test()">nginx跨域请求测试</button>
<div id="test"></div>
</body>
<script src="jquery-1.10.2.min.js"></script>
<script>function test() {$.get("http://192.168.75.128/wel.html",null,function(result) {alert("跨域请求成功");});}</script>
</html>

然后访问localhost:9000/wel1.html

点击测试按钮

出现了跨域访问错误

4 修改nginx server 配置

添加如下内容

server {listen 80; # 监听的端⼝server_name localhost; # 域名或iplocation / { # 访问路径配置#允许跨域请求的域，* 代表所有add_header 'Access-Control-Allow-Origin' *;#允许带上cookie请求add_header 'Access-Control-Allow-Credentials' 'true';#允许请求的方法，比如 GET/POST/PUT/DELETEadd_header 'Access-Control-Allow-Methods' *;#允许请求的headeradd_header 'Access-Control-Allow-Headers' *;root /usr/share/nginx/html;# 根⽬录index index.html index.htm; # 默认⾸⻚}error_page 500 502 503 504 /50x.html; # 错误⻚⾯location = /50x.html {root html;}
}

然后重启nginx再次测试

跨域求成功了

最重要的就是要在被跨域的nginx配置添加如下配置

#允许跨域请求的域，* 代表所有
add_header 'Access-Control-Allow-Origin' *;
#允许带上cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
#允许请求的方法，比如 GET/POST/PUT/DELETE
add_header 'Access-Control-Allow-Methods' *;
#允许请求的header
add_header 'Access-Control-Allow-Headers' *;

Nginx配置跨域（CORS）相关推荐

Nginx配置跨域请求 Access-Control-Allow-Origin *
Nginx配置跨域请求 Access-Control-Allow-Origin * 当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is p ...
nginx配置跨域、gzip加速、代理详细讲解
1.配置跨域这个很简单,直接打开配置nginx.conf ,在http下配置下面三行代码:当然如果你是想某一个虚拟主机下跨域,那就在哪个server下面添加 add_header Access-Co ...
cors nginx 怎么解决_NGINX配置跨域CORS支持的正确方式
这两天在搞酷瓜云网课的 app,采用 uni-app 做全端支持,现学现卖,目前算是入门了. 在做 H5 的时候难免会跨域请求后端 API,虽然用 HBuilder 内置的浏览器不会有跨域问题(这 ...
Nginx配置跨域访问
由于浏览器同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问 ...
nginx配置跨域访问后不生效，仍然显示跨域问题
解决方案首先,我们先确定跨域源目标没写错,可以先将Allow-Origin改成*测试 server {listen 80;server_name https://www.test.com;locat ...
Nginx配置跨域兼容IOS12 苹果手机请求程序报network error错误
原文更新链接 https://www.aiprose.com/blog/146 最近有用户反馈在使用微信H5页面的时候,一直提示network error错误,但是本身网络都是正常的,因为网页能正常打 ...
nginx配置跨域，代理同源
前端把api的baseurl写成和前端部署域名相同再nginx将/api转发到真实服务器地址 location /api {proxy_set_header Origin "http:// ...
SpringBoot配置跨域修改默认json序列化
SpringBoot配置跨域修改默认json序列化修改跨域 addCorsMappings(CorsRegistry registry)方法添加跨域设置的,无法生效,原因是请求经过的先后顺序问题, ...
Nginx | Nginx之跨域配置(CORS)
Nginx之跨域配置 1. 注意 2. CORS 3. Nginx通过CROS 实现跨域 4. 配置信息 nginx.conf 中 1. 注意服务端口不能与代理端口一致端口会冲突服务本身做了跨域 ...
无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...

Nginx配置跨域（CORS）

1 什么是跨域请求

2.常见跨域情况

3 nginx跨域示例演示

4 修改nginx server 配置

Nginx配置跨域（CORS）相关推荐

最新文章

热门文章