Camellia Nginx跨域问题解决方法与实战示例
对于跨域问题相信你在熟悉不过了，这里不做多的解释，只给大家提供干货，帮助大家实实在在解决遇到的跨域问题，废话不多说，向下看。
一、实验准备
准备一台安装有 nginx 的机器
二、配置跨域访问
配置访问 url 为 http://192.168.72.130:9999/访问到/opt/nginx 目录下的 a.html 文件，a.html 中配置有跨域访问的链接：http://192.168.72.130:8888/getUser。
步骤一： 配置跨域访问链接
a.html 文件内容如下：
<html>
<head>
<meta charset="utf-8">
<title>跨域问题演示</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.get('http://192.168.72.130:8888/getUser',function(data){
alert(JSON.stringify(data));
});
});
});
</script>
</head>
<body>
<input type="button" value="获取数据" id="btn"/>
</body>
</html>
排错步骤:
注意上述的 jquery.js 文件需要提前放置在与 a.html 同一个文件目录下，不然会报如下错误：
Uncaught ReferenceError: $ is not defined
解决方法： 将 jquery.js 文件放在与 a.html 同一个目录下。
步骤二：配置两个不同源的 server
#配置不同源的两个 server
server {
listen 9999;
server_name localhost;
gzip on;
root /opt/nginx;
location / {
index a.html;
}
}
server {
listen 8888;
server_name localhost;
gzip on;
root /opt/nginx;
location /getUser {
default_type application/json;
return 200 '{"id":"123","name":"小明","age":"18"}';
}
}
访问：http://192.168.72.130:8888/getUser
访问：http://192.168.72.130:9999/
三、跨域报错现象分析
Access to XMLHttpRequest at ‘http://192.168.72.130:8888/getUser’ from origin ‘http://192.168.72.130:9999’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.Understand this error
jquery.js:10109
错误原因
1. 同源策略与 CORS
浏览器遵循同源策略，它会阻止网页从一个源（协议、域名、端口号的组合）加载的脚本去访问另一个不同源的资源。在你的情况中，请求的源是 http://192.168.72.130:9999，而目标资源的源是 http://192.168.72.130:8888，端口号不同，所以属于跨域请求。
2. Access-Control-Allow-Origin 头缺失
当进行跨域请求时，浏览器会检查服务器返回的响应头中是否包含 Access-Control-Allow-Origin 字段。该字段用于指定允许访问该资源的源。如果服务器没有在响应头中设置这个字段，浏览器会认为该请求不被允许，从而阻止脚本访问响应内容，即便服务器实际上已经成功返回了数据（状态码 200）。
错误信息分析
Access to XMLHttpRequest at 'http://192.168.72.130:8888/getUser' from origin 'http://192.168.72.130:9999' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.：明确指出是由于 CORS 策略的限制，请求被阻止，原因是响应头中没有Access-Control-Allow-Origin字段。GET http://192.168.72.130:8888/getUser net::ERR_FAILED 200 (OK)：这里的net::ERR_FAILED是浏览器给出的错误，虽然服务器返回了状态码 200（表示请求成功处理），但由于 CORS 策略的限制，浏览器没有将响应内容提供给脚本。
四、跨域问题解决
1、解决方案说明
使用 add_header 指令，该指令可以用来添加一些头信息
| 语法 | add_header name value… |
|---|---|
| 默认值 | — |
| 位置 | http、server、location |
此处用来解决跨域问题，需要添加两个头信息，一个是Access-Control-Allow-Origin，Access-Control-Allow-Methods。
- A
ccess-Control-Allow-Origin: 直译过来是允许跨域访问的源地址信息，可以配置多个(多个用逗号分隔)，也可以使用*代表所有源。 Access-Control-Allow-Methods:直译过来是允许跨域访问的请求方式，值可以为GET POST PUT DELETE...,可以全部设置，也可以根据需要设置，多个用逗号分隔。
具体配置方式：
location /getUser{
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
default_type application/json;
return 200 '{"id":1,"name":"TOM","age":18}';
}
2、配置
server {
listen 8888;
server_name localhost;
gzip on;
root /opt/nginx;
location /getUser {
#添加头部允许 URL：http://192.168.72.130:9999 进行访问
add_header Access-Control-Allow-Origin http://192.168.72.130:9999;
#添加头部允许访问的方法
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
default_type application/json;
return 200 '{"id":"123","name":"小明","age":"18"}';
}
}
3、验证
浏览器输入：http://192.168.72.130:9999/
跨域访问配置成功如下：
以上关于Nginx跨域问题解决方法与实战示例的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Nginx跨域问题解决方法与实战示例
