解决vue-resource跨域

vue-resource携带cookie需要添加参数:

Vue.http.interceptors.push((request, next) => {
  request.credentials = true;
  next();
});

加上以后会出现CORS跨域问题: CORS 是一个 W3C标准,该标准定义了在访问跨域资源时,服务端和客户端需要如何沟通,如何授权信任。

CORS的原理是:使用 http自定义头部 ,请求头附带客户端信息,服务端验证,并且返回响应头告诉客户端是否允许访问。

所以该标准需要客户端和服务端同时配合支持,当前所有的浏览器都支持该标准。

CORS 对于用户来说是无感知的,由浏览器自动完成 。

因为当前所有浏览器都支持该标准,并且由浏览器自动完成检测,所以当我们需要使用CORS的时候,只需要由服务端改动,前端不需要改动。

添加以后需要在nginx和php中进行相应的设置:

nginx:

add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,DELETE,PUT';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Origin,Content-Type,Accept,Authorization';
add_header 'Access-Control-Max-Age' 1728000;

try_files $uri $uri/ /api.php$is_args$args;

php:

if(isset($_SERVER["HTTP_ORIGIN"])) {
    header('Access-Control-Allow-Origin:'.$_SERVER["HTTP_ORIGIN"]);
}
header("Access-Control-Allow-Headers: Origin,X-Requested-With,Content-Type,Accept,Authorization");
header("Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS");
header('Access-Control-Max-Age:86400');
header('Access-Control-Allow-Credentials: true');

鹿晓鹏博客
请先登录后发表评论
  • latest comments
  • 总共0条评论