axios配合服务器端设置跨域访问

1.IIS配置

axios为了实现跨域访问，这里使用IIS进行实例。要是实现跨域访问，打开IIS服务器中HTTP响应头一栏，看到里面只有一个选项：

浏览器请求时，会出现跨域错误：

这个时候，服务器HTTP响应头中添加：”Access-Control-Allow-Origin -> *”

设置完成之后，发现还是有错误：

这是因为axios默认的get请求会添加一个 “Access-Control-Request-Headers: content-type” 的请求头，

所以应该继续添加IIS服务器的响应头 “ Access-Control-Allow-Headers -> Origin, X-Requested-With, Content-Type, Accept “

这样便可以实现跨域访问了，如果其他后台服务，比如Spring Boot编写的语言，只需要将设置相应投即可，例：response.setHeader(“Access-Control-Allow-Headers”, “ Origin, X-Requested-With,Content-Type, Accept”);

有时候为了实现后台得到前台的用户身份，需要设置：axios.defaults.withCredentials = true; 将cookie信息携带，后台可以做用户验证。开启这个选项之后，后台可以拿到身份认证信息，但是前台会报错：

这个时候要修改：Access-Control-Allow-Origin -> *，将其设置为具体的带端口号的访问形式：比如前台的访问页面是localhot:8088,则设置：

这个时候，前台还是有错误，比如：

这个时候，IIS中的响应头，应该添加：”Access-Control-Allow-Credentials -> true”

最后大功告成：(这里错误是服务器错误，不是跨域的问题)

1
2
3
4

Access-Control-Allow-Credentials -> true
Access-Control-Allow-Headers -> Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Origin -> http://localhost:8088

2.nginx配置

使用nginx配置跨域的时候，即便是设置了 add_header Access-Control-Allow-Origin ，还是有可能在OPTION请求中出现403错误。

这个时候应该设置OPTION请求返回return 204状态码就好了。

nginx配置的内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

## 设置跨域白名单
set $cors_origin "";
if ($http_origin ~* "^http://dev.proheng.net") {
        set $cors_origin $http_origin;
}
if ($http_origin ~* "^http://localhost") {
        set $cors_origin $http_origin;
}

## location的配置
location ^~/phpublic {
        client_max_body_size   40m;

        proxy_pass http://localhost:8080/$request_uri;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        ## 跨域

        add_header Access-Control-Allow-Origin $cors_origin;
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization,X-Requested-With,Content-Type, Accept";
        add_header Access-Control-Allow-Credentials true;

        if ($request_method = 'OPTIONS') {
                return 204;
        }

}

其中如果不配置$request_method = ‘OPTIONS’这个，还是会出现：”Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”

3.凭据不支持，如果 CORS 头 ‘Access-Control-Allow-Origin’ 为 ‘*’）

服务器已经设置了跨域，但是请求的时候，还是报错了，这个主要就是在设置的时候开启了cookie支持，关闭之后就可以了。

1
2
3
4
5

const server = axios.create({
  baseURL: baseURL,
  timeout: 50 * 1000,
  withCredentials: true // 是否携带cookie ,主要是这个
})