问题
今天在写一个后端api,通过get请求返回json。结果想试试效果,就在前端上用Vue.js写了请求。结果就直接报了错~
错误提示如下:No 'Access-Control-Allow-Origin' header is present on the requested resource.
翻译过来就是:在请求的资源上不存在'Access-Control-Allow-Origin'标头。
解决办法
在php代码的最开头加上下面的header代码就好:
header('Access-Control-Allow-Origin:*');
//*表示请求可以来自任何域名,想指定可以改成https://xxx.xxx/xxx
多个域名可以这样
//配置一个数组包含允许跨域的域名在这里面
$allow_origin = array(
'https://code.it919.cn',
'http://www.it919.cn'
);
//获取需要访问接口数据的域名
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
//判断该域名是否是在我们定义好的数组里面
if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
}
同样报错出现其他的不存在,按要求加入下列header代码就好:
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE');
//允许请求的类型,同样可以用*表示全部
header('Access-Control-Allow-Credentials: true');
//设置是否允许发送cookies。为true时,Allow-Origin配置不能用*,此时前端似乎也要做配置,让请求中携带cookie
header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin');
//设置允许自定义请求头的字段