Nginx CORS跨域

xiao7cn 发布于2019-07-25 14:09 / 2900人阅读

摘要：场景我们的资源来自网络的四面八方，所以难免需要用上跨域，业界也有非常多跨域的解决方案，这次我是来说说跨域与状态码之间的一个问题。

场景

我们的资源来自网络的四面八方，所以难免需要用上跨域，业界也有非常多跨域的解决方案，这次我是来说说跨域与状态码之间的一个问题。

问题

当我们的 URL 地址返回的状态码是 400、403、404、500 的时候，跨域的资源是不会跟随返回的，也就是说，即便是 Nginx 上配置了 add_header 关键字，也不会随着内容返回而返回。

举个例子说:

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;

当我们在请求对应地址的时候，理应是会返回已经配置好的头部信息，但是我们来看看最终的结果。

HTTP/1.1 200 OK
Server: openresty/1.11.2.2
Date: Fri, 26 Jan 2018 08:46:39 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 558
Last-Modified: Tue, 28 Mar 2017 01:13:24 GMT
Connection: keep-alive
ETag: "58d9b8b4-22e"
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Accept-Ranges: bytes

内容无误。

HTTP/1.1 404 Not Found
Server: openresty/1.11.2.2
Date: Fri, 26 Jan 2018 08:47:18 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 175
Connection: keep-alive

神奇了，这里404状态码下面居然自定义的响应头消失了。

原因与解决方式

留意 Nginx 文档上说的:

Adds the specified field to a response header provided that the response code equals 200, 201 (1.3.10), 204, 206, 301, 302, 303, 304, 307 (1.1.16, 1.0.13), or 308 (1.13.0). The value can contain variables.

意思就是说，add_header 只会追加到以上响应状态码的响应头上面。

因为咱们的 API 有各种的状态码返回，那么其他状态码下，该怎么办? 大家留意文档上有一个参数。

Syntax:    add_trailer name value [**always**];
Default:    —
Context:    http, server, location, if in location
This directive appeared in version 1.13.2.

你会发现有个 [always] 参数，那么这个参数，就是让你的配置头，应用在所有的影响上面去。

将参数添加进去:

add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods * always;

重启 nginx 服务器后重试一下.

HTTP/1.1 200 OK
Server: openresty/1.11.2.2
Date: Fri, 26 Jan 2018 09:01:36 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 558
Last-Modified: Tue, 28 Mar 2017 01:13:24 GMT
Connection: keep-alive
ETag: "58d9b8b4-22e"
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Accept-Ranges: bytes

200请求没变化，一切正常。

HTTP/1.1 404 Not Found
Server: openresty/1.11.2.2
Date: Fri, 26 Jan 2018 09:02:12 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 175
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *

现在 404 也正确了。我们的跨域也正是配置完成。

关于 OPTIONS 请求

当我们前端发起跨域请求的时候，会事先发起一次 OPTIONS 请求，以用来查询该接口是否支持跨域和对应的请求方法。

在配置方面可以这么做。

if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods *;
    add_header Access-Control-Allow-Credentials true;
    return 204;
   }

当然我这里的 * 这么用是不好的，你需要对应域名去配置。

另外PHP方面我们也提供了一个 CORS 的扩展库，可以直接在fastd中使用。

github: cors-provider

GPU云服务器云服务器 nginx服务器跨域 CORS 服务器 cors cors 登陆服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39779.html

CORS跨域与Nginx反向代理跨域优劣对比

摘要：最近写了一些关于前后端分离项目之后，跨域相关方案的基本原理和常见误区的帖子，主要包括和反向代理。反向代理此时后端相当于不跨域，和正常请求一致，无需额外配置。最近写了一些关于前后端分离项目之后，跨域相关方案的基本原理和常见误区的帖子，主要包括CORS和Nginx反向代理。这两种方案项目中都有在用，各有优缺，关于具体使用哪种方案，大家的观点也不大一致，本文主要就此展开一下，从前后端及服务...

yiliang 2019-07-25 14:26 评论0 收藏0
CORS方式实现ajax跨域 --- nginx配置

摘要：目前，所有浏览器都支持该功能，浏览器不能低于。因此，实现通信的关键是服务器。如果指定的域名在许可范围内，服务器返回的响应，会多出头信息字段也可能多出其他可选字段或者是表示接受任意域名的请求。实际跨域问题及其解决方案 1.课题：ajax实现跨域访问 2.背景： 1.画面服务器：192.168.196.6 → tomcat服务2.js模板服务器：192.168.196.8 → ngi...

csRyan 2019-07-25 14:23 评论0 收藏0
彻底弄懂跨域问题

摘要：用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

rose 2019-07-25 14:36 评论0 收藏0
跨域问题汇总

摘要：因为浏览器的同源策略，前端开发会遇到各种跨域问题。前言在总结各种跨域问题之前，我们先来了解一下浏览器的同源策略。所以只能解决一级域名相同二级域名不同的跨域问题。跨域问题的场景和解决方案多种多样，只要是做前端开发，总会遇到。而且面试时也是必问的问题。所以自己学习总结记录一下。因为浏览器的同源策略，前端开发会遇到各种跨域问题。本篇文章总结了遇到跨域问题的不同的场景以及对应的解决方案。 ...

MkkHou 2019-08-21 17:46 评论0 收藏0