本文共 2259 字，大约阅读时间需要 7 分钟。

人在江湖走，哪有不湿鞋？

经常做api开发的的时候，总会遇到跨域的情况，特别是前后端完全分离的情况，为什么会这样呢？

出于安全性的原因，浏览器会限制 Script 中的跨域请求。由于 XMLHttpRequest 遵循同源策略，所有使用 XMLHttpRequest 构造 HTTP 请求的应用只能访问自己的域名，如果需要构造跨域的请求，那么开发者需要配合浏览器做出一些允许跨域的配置。

解决办法有很多，主要说下两种：

方法之一，修改nginx

修改web服务器的配置允许跨域，一劳永逸，以nginx为例：

在站点配置节点下添加：

server{	listen       80;	index index.html index.htm index.php;	root  /www/public/;			add_header Access-Control-Allow-Origin *;	add_header Access-Control-Allow-Headers "x-requested-with,Authorization,Accept, Origin, X-Requested-With, Content-Type, Last-Modified";    add_header Access-Control-Allow-Methods GET,POST;    add_header Access-Control-Max-Age 1728000;        # ....}

方法之二，在php上做手脚

虽然修改nginx配置是挺方便，让你懒到不用改一行代码，但：

不够灵活，不能针对某个接口去允许跨域，只能全局设置，不够安全；

条件不一定允许，很多时候不一定拥有nignx的修改权限。

这里说下laravel框架里设置跨域：

首先，您需要一个中间件：

   server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';        $originHost = parse_url($origin, PHP_URL_HOST);        $originPort = parse_url($origin, PHP_URL_PORT);        $originHost .= $originPort ? ':' . $originPort : '';        // 允许跨域的域名 可以加在配置里        $allowOriginHost = [            'test.com',        ];        $response = $next($request);        if (in_array($originHost, $allowOriginHost)) {            $response->header('Access-Control-Allow-Origin', $origin);            $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN, Last-Modified');            $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');            $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');            $response->header('Access-Control-Allow-Credentials', 'true');        }        return $response;    }}

然后注册中间件，app/Http/Kernel.php

protected $middlewareGroups = [        // ....        'api.cross' => [            \App\Http\Middleware\EnableCrossRequest::class,        ],        // ....    ];

然后，在需要跨域的路由上加上该中间件

Route::group([    'prefix'     => 'api',    'middleware' => ['api.cross'],], function () {    // 路由    });

解决axios跨域时，发送post请求变options的问题

跨域遇到复杂请求时, 会先发送options去试探是否支持跨域, 所以有两次请求完全正常，但会导致程序重复处理，所以可以通过以下方法屏蔽options请求

Route::options('/{all}', function () {    return response('');})->where(['all' => '([a-zA-Z0-9-]|_|/)+']);

转载地址：http://cmuws.baihongyu.com/