开篇之前,在前几天做项目的时候出现的问题,OPTIONS说没有权限,无法进行请求,在前后端分离时,跨域出现的就比较棘手,今天我们就来解决这个问题
什么是跨域
跨域通俗易懂,就是两个不同的域名去取数据的时候就造成了跨域。假如说a.c.com
提供的接口需要 b.c.com
去调用的时候就是出现了跨域,或者根域名不同如a.c.com
提供接口,d.com
去调用的时候也属于跨域问题
如何解决跨域问题
基础的解决方法是使用jsonp
,但是jsonp
会有只能用GET请求的缺陷,所以现在的解决方法为CORS
,详细内容请见阮一峰大神的CORS
Laravel怎么解决呢?
Laravel组件组件化开发的时候在composer中提供了cors的包
laravel-china推荐用第一个我,开始我用了第一个会出现这种问题,当我用GET、POST这种请求是没有问题,但是当我前端用vue里面去做前后端分离的时候出现了跨域的问题
OPTIONS没有被允许,查阅资料后发现,当不是简单请求时,就会进行OPTIONS预检,在这里没有处理。
解决方法
更换Laravel的CORS
的包
- 拉下来对应包
composer require resultsystems/laravel-cors
- 设置Provider
在config/app.php
中的providers
中添加ResultSystemsCorsCorsServiceProvider::class,
- 设置Middlewares
在appHttpMiddlewareKernel.php
的$routeMiddleware
中添加'cors' => ResultSystemsCorsCorsMiddleware::class,
然后在$middlewareGroups
中的api
中添加'cors'
- 执行命令配置cors域
php artisan vendor:publish --provider="ResultSystemsCorsCorsServiceProvider"
里面*
号指的是全部域名都支持,如果设置域名那么直接写域名就好 - Nginx中的设置
这里以Ubuntu为例进入虚拟主机配置文件cd /etc/nginx/sites-available/
vim default
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.php?$query_string;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
#
# Om nom nom cookies
#
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Authorization,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
}
然后nginx -s reload
重启大家就可以访问接口了
他是在nginx去解决的options请求的问题。