# 五.跨域
前言
两种方式：1.设置响应头信息，浏览器读取接口响应头信息跨域；2.使用代理服务器的方式跨域
# 1.CORS 方式
| 类型 | 种类 |
|---|---|
| 语法 | add_header name value |
| 默认 | add_header -- |
| 上下文 | http,server,location |
location ~ .*\.json$ {
add_header Access-Control-Allow-Origin http://localhost:3000;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
root /data/json;
}
1
2
3
4
5
2
3
4
5
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://47.104.184.134/users.json", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
server {
...
location / {
# 允许 所有头部 所有域 所有方法
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' '*';
add_header 'Access-Control-Allow-Methods' '*';
# OPTIONS 直接返回204h
if ($request_method = 'OPTIONS') {
return 204;
}
}
...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14