cors在服务器还是接口_Cors最佳实践

基础知识

CORS(Cross-Origin Resource Sharing)&＃xff0c;跨域资源共享&＃xff0c;是浏览器跨域的官方解决方案。相比其他常见的跨域解决方案(jsonp、iframe、postMessage)&＃xff0c;CORS具有以下优点&＃xff1a;

1. 前端代码优雅。CORS由浏览器和后台交互完成&＃xff0c;前端开发者感受不到和同源通信的差别&＃xff0c;代码完全一样&＃xff1b;

2. 规范标准&＃xff0c;兼容性好&＃xff0c;IE10以上都支持&＃xff0c;浏览器之间几乎没有差异&＃xff1b;

3. 支持所有类型的HTTP请求&＃xff0c;功能完善。(相比之下&＃xff0c;jsonp只支持get&＃xff0c;对RESTful风格接口很不友好)&＃xff1b;

4. 跨平台统一。同一个接口可以同时供WEB和APP使用&＃xff0c;不需额外处理&＃xff1b;

5. 错误信息可以被XMLHttpRequest的onerror捕获&＃xff0c;便于调试。

原理

CORS不需要前端代码做任何处理&＃xff0c;一切交互都由浏览器和服务端完成。请求分为两种&＃xff1a;简单请求(simple request)和非简单请求(not-so-simple request)。符合以下3个条件即可使用简单请求&＃xff1a;

1. 请求方法是HEAD、GET或POST&＃xff1b;

2. Http Header只包含Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type&＃xff0c;没有其他字段&＃xff1b;

3. Content-Type的值是application/x-www-form-urlencoded、multipart/form-data或text/plain。

不符合上述条件的任何一项&＃xff0c;即作为非简单请求处理。非简单请求只是多加了一次OPTIONS请求&＃xff0c;其余操作与简单请求一致。

简单请求

浏览器发起简单请求的时候&＃xff0c;会自动在header中增加Origin字段&＃xff0c;用来告知服务器本次请求来自哪个地址。字段的值完成包含“协议&＃43;域名&＃43;端口”&＃xff0c;因为这三者任意一个跟接口地址不一致&＃xff0c;都会造成跨域。这个字段是浏览器添加的&＃xff0c;前端代码里请求既不需要、也没办法修改。

服务器接收到请求之后&＃xff0c;需要判断header的Origin字段。如果不在许可范围内&＃xff0c;后台需要返回一个正常的、不带额外header的响应。浏览器发现缺少Access-Control-Allow-Origin字段&＃xff0c;则抛出错误。注意&＃xff0c;不管请求是否成功&＃xff0c;http响应的状态码都可以是200&＃xff0c;所以不能通过状态码去识别错误&＃xff0c;只能通过XMLHttpRequest的onerror回调函数捕获错误。

如果Origin指定的域名在许可范围内&＃xff0c;后台需要返回一个带有以下额外header的响应&＃xff1a;

• Access-Control-Allow-Origin&＃xff1a;必填。可以填请求时Origin字段的值&＃xff0c;表示允许本次跨域请求&＃xff0c;也可以填“*”&＃xff0c;表示允许任意地址的请求。

• Access-Control-Allow-Credentials&＃xff1a;选填。表示是否允许发送COOKIE&＃xff0c;默认为false。

• Access-Control-Expose-Headers&＃xff1a;选填。在跨域访问时&＃xff0c;XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的字段(Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma)&＃xff0c;如果要获取header中的其他字段&＃xff0c;需要把字段名配置在这里。

非简单请求

浏览器发起非简单请求的时候&＃xff0c;会先发起一次"preflight"(预检)请求&＃xff0c;请求的方法为OPTIONS。预检请求的header中包含以下两个字段&＃xff1a;

• Access-Control-Request-Method: 必填。本次请求用到的方法。

• Access-Control-Request-Headers: 选填。本次请求会在header中额外附带的字段。

由于这次请求是浏览器自动发起的&＃xff0c;前端代码量既不需求、也没有办法控制&＃xff0c;仅需要服务端去接收并做响应即可。只有服务端返回允许请求的响应&＃xff0c;浏览器才会正式发送XMLHttpRequest请求&＃xff0c;否则就报错&＃xff0c;同样通过onerror回调函数捕获。

服务端对预检请求的响应&＃xff0c;header中应带有以下字段&＃xff1a;

• Access-Control-Allow-Methods: 必填。本接口允许的请求方法。

• Access-Control-Allow-Headers: 选填。本接口允许的header字段。

• Access-Control-Allow-Credentials: 选填。表示是否允许发送COOKIE&＃xff0c;默认为false。

• Access-Control-Max-Age: 选填&＃xff0c;本次预检请求有效期&＃xff0c;单位秒。有效期内重复发起请求时&＃xff0c;不需要再发送预检请求。

预检请求完成以后&＃xff0c;就可以正常发送真正的请求了&＃xff0c;这个跟简单请求是完全一致的。

实践

根据上述原理&＃xff0c;服务端想要支持CORS&＃xff0c;须实现两个功能&＃xff1a;

1. 对OPTIONS预检请求正确响应&＃xff1b;

2. 对其他类型的所有请求附带正确的header。

这两个功能需要拦截http请求并修改响应&＃xff0c;可以在Nginx或者框架路由中完成&＃xff0c;而不用修改业务代码。以下提供三类常见的解决方案。

Nginx

通过Nginx即可实现CORS&＃xff0c;不需要修改程序代码。Nginx配置可能会用到以下功能&＃xff1a;

• $request_method&＃xff1a;获取请求的方法&＃xff0c;判断到&＃39;OPTIONS&＃39;则返回204&＃xff1b;

• $http_origin&＃xff1a;获取请求的地址(即http请求header里的origin字段)&＃xff1b;

• add_header&＃xff1a;给响应增加头部。

举例&＃xff1a;

server { ... location / { #处理预检请求 if ($request_method &＃61; &＃39;OPTIONS&＃39;) { add_header Access-Control-Allow-Origin https://blog.oonne.com; add_header Access-Control-Max-Age 600; add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS; add_header Access-Control-Allow-Headers &＃39;Content-Type, x-auth-token&＃39;; add_header Content-Length 0 ; return 204; } #其他请求添加头部 add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Expose-Headers Content-Length; proxy_pass http://127.0.0.1:8080/; }}

备注&＃xff1a;http响应码204表示成功但没数据&＃xff0c;200表示成功&＃xff0c;预检请求没有数据&＃xff0c;正确的状态码应该是204。(虽然返回200前端也能正常处理)

Node.js

以Express为例&＃xff0c;我们可以实现一个中间件&＃xff1a;

app.use(function (req, res, next) { if (req.method &＃61;&＃61; &＃39;OPTIONS&＃39;) { res.header(&＃39;Access-Control-Allow-Origin&＃39;, &＃39;https://blog.oonne.com&＃39;); res.header(&＃39;Access-Control-Max-Age&＃39;, 1728000); res.header(&＃39;Access-Control-Allow-Methods&＃39;, &＃39;PUT, POST, GET, DELETE, OPTIONS&＃39;); res.header(&＃39;Access-Control-Allow-Headers&＃39;, &＃39;Content-Type, x-auth-token&＃39;); res.send(204); } else { res.header(&＃39;Access-Control-Allow-Origin&＃39;, &＃39;https://blog.oonne.com&＃39;); res.header(&＃39;Access-Control-Allow-Credentials&＃39;, true); res.header(&＃39;Access-Control-Allow-Headers&＃39;, &＃39;Content-Type&＃39;); next(); }});

也可以使用独立的CORS库&＃xff0c;使用方法参考官方文档。

PHP

Larave有CORS中间件&＃xff0c;参考文档使用即可&＃xff0c;原理跟Express差不多&＃xff0c;这里不用多做介绍。

Yii2的路由模式比较特殊&＃xff0c;需要修改Controller里的behaviors。我们先可以实现一个基础的Controller&＃xff0c;其他Controller都继承他。然后在behaviors中定义一个corsFilter&＃xff1a;

Response::FORMAT_JSON ]; $behaviors[&＃39;corsFilter&＃39;] &＃61; [ &＃39;class&＃39; &＃61;> CorsFilter::className(), &＃39;cors&＃39; &＃61;> [ &＃39;Access-Control-Allow-Credentials&＃39; &＃61;> true, &＃39;Access-Control-Max-Age&＃39; &＃61;> 3600, &＃39;Access-Control-Request-Method&＃39; &＃61;> [&＃39;POST&＃39;, &＃39;GET&＃39;], &＃39;Access-Control-Request-Headers&＃39; &＃61;> [&＃39;Content-Type&＃39;, &＃39;X-Auth-Token&＃39;], &＃39;Origin&＃39; &＃61;> Yii::$app->params[&＃39;apiOrigin&＃39;], ] ]; $behaviors[&＃39;verbFilter&＃39;] &＃61; [ &＃39;class&＃39; &＃61;> OptionsFilter::className(), &＃39;actions&＃39; &＃61;> $this->verbs(), ]; return $behaviors; }}

其中&＃xff0c;CorsFilter需要对OPTIONS预检请求做特殊处理&＃xff0c;如下&＃xff1a;

request &＃61; $this->request ?: Yii::$app->getRequest(); $this->response &＃61; $this->response ?: Yii::$app->getResponse(); $this->overrideDefaultSettings($action); $requestCorsHeaders &＃61; $this->extractHeaders(); $responseCorsHeaders &＃61; $this->prepareHeaders($requestCorsHeaders); $this->addCorsHeaders($this->response, $responseCorsHeaders); // clear all options method $verb &＃61; Yii::$app->getRequest()->getMethod(); if ($verb&＃61;&＃61;&＃39;OPTIONS&＃39;){ $this->response->statusCode &＃61; 204; $this->response->send(); return false; } return true; }}

同时&＃xff0c;Controller里其他的behaviors配置&＃xff0c;都需要保证对OPTIONS请求的正常返回。比如上面用到的OptionsFilter&＃xff0c;用于过滤请求的方法的&＃xff0c;我们需要保证所有的请求都允许OPTIONS方法&＃xff0c;如下&＃xff1a;

action->id; if (isset($this->actions[$action])) { $verbs &＃61; $this->actions[$action]; } elseif (isset($this->actions[&＃39;*&＃39;])) { $verbs &＃61; $this->actions[&＃39;*&＃39;]; } else { return $event->isValid; } //对OPTIONS请求做特殊处理 $verb &＃61; Yii::$app->getRequest()->getMethod(); if ($verb&＃61;&＃61;&＃39;OPTIONS&＃39;){ return $event->isValid; } $allowed &＃61; array_map(&＃39;strtoupper&＃39;, $verbs); if (!in_array($verb, $allowed)) { $event->isValid &＃61; false; Yii::$app->getResponse()->getHeaders()->set(&＃39;Allow&＃39;, implode(&＃39;, &＃39;, $allowed)); throw new MethodNotAllowedHttpException(&＃39;Method Not Allowed. This URL can only handle the following request methods: &＃39; . implode(&＃39;, &＃39;, $allowed) . &＃39;.&＃39;); } return $event->isValid; }}

如果你在继承的Controller里用到了其他behaviors&＃xff0c;也需要考虑预检请求的返回问题。

总结

本文介绍了CORS规范的原理&＃xff0c;并给出了Nginx、Node.js、PHP的最佳实践。