跨域解决方案 前后端分离项目100%会碰到跨域问题跨域提示Access to XMLHttpRequest at 'http://manage.sdk.phpfunny.cn/index/portal_site/v1/home' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.什么是跨域指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制。同源策略：是指协议（protocol）、域名（host）、端口号（port），都必须相同，其中一个不同都会产生跨域。http://www.test.com:8080/　　协议（http）、主域名（test）、子域名（www）、端口号（8080）非同源策略：无法读取非同源网页的cookie、localStorage、IndexedDB无法接触非同源网页的DOM无法向非同源地址发送 AJAX 请求解决跨域方法JSONPCORS 跨域资源共享（Cross-Origin Resource Sharing）反向代理具体解释请看下方实践或者百度网上超多的教程。[前端]nodejs+vue解决跨域采用第三种方案 使用nodejs内置反代来绕过跨域问题详见vue解决跨域文章，还有其他方式等待后期补充。[后端]laravel接口解决跨域利用框架的中间件来允许指定域名请求创建中间件cd Http/Middleware vim EnableCrossRequestMiddleware.php完善中间件内容<?php namespace App\Http\Middleware; use Closure; class EnableCrossRequestMiddleware{ /** * @param $request * @param Closure $next * @return mixed */ public function handle($request, Closure $next) { $response = $next($request); $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : ''; $allow_origin = [ 'http://127.0.0.1:8080',//允许访问 'http://manage.sdk.xxxxx.cn',//允许访问 'http://manage.sdk.xxxxx.com/' ]; if (in_array($origin, $allow_origin)) { $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'); $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; } }注册中间件在protected $middleware 里写上中间件类名。如果没有Http/Kernel.php则需要创建<?php namespace App\Http; use Illuminate\Foundation\Http\Kernel as HttpKernel; class Kernel extends HttpKernel { /** * The application's global HTTP middleware stack. * * These middleware are run during every request to your application. * * @var array */ protected $middleware = [ \App\Http\Middleware\EnableCrossRequestMiddleware::class, ]; /** * The application's route middleware groups. * * @var array */ protected $middlewareGroups = [ ]; /** * The application's route middleware. * * These middleware may be assigned to groups or used individually. * * @var array */ protected $routeMiddleware = [ ]; } 完成，重新请求即可。其他方式解决跨域PHP项目中共享域设置待补充

PHP项目中共享域设置 在初始化initialize中写入头信息当无需ajax使用jsonp的时候，可以在初始化initialize下写入头信息，请求源，请求方式的方法解决跨域受同源策略阻拦的问题，注意localhost和127.0.0.1也属于跨域//允许跨域的域名,*代表所有域名都可以访问，可以换成域名，并且多个域名用逗号分割开。 header('Access-Control-Allow-Origin:*'); //请求头中设置允许的请求方法 header('Access-Control-Allow-Headers:X-Requested-With,X_Requested_With,Token,Client,Content-Type,Accept'); //响应标头指定响应访问所述资源到时允许的一种或多种方法预检请求。 header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE');X-Requested-With ,请求头 区分ajax请求还是普通请求可以看到 Ajax 请求多了个 x-requested-with ，可以利用它，request.getHeader(“x-requested-with”); 为 null，则为传统同步请求，为 XMLHttpRequest，则为 Ajax 异步请求。Token(令牌),Client（客户机）,Content-Type（在请求中（如POST或PUT），客户端告诉服务器实际发送的数据类型）Accept一般配合input标签使用在文件上传中使用 accept 属性，本例中的输入字段可以接受 GIF 和 JPEG 两种图像：<form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> </form>如果不限制图像的格式，可以写为：accept="image/*"。什么是Access-Control-Allow-Origin他是HTML5中定义的一种解决资源跨域的策略。通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。html设置方式：<meta http-equiv="Access-Control-Allow-Origin" content="*">Access-Control-Allow-Origin:*的安全性根据w3c标准，如果b.com域下js要读取到a.com域下的需要登录才能访问的资源，需要a.com域同时设置了 Access-Control-Allow-Credentials: true头（即允许third-party cookie）并且如果设置access-control-allow-origin为*星号（任何域），则Access-Control-Allow-Credentials头是不能设置为true的，参见http://www.w3.org/TR/cors/#resource-requests所以理论上网站设置了Access-control-allow-origin: *，并没有实际危害，因为并不能跨域读取私密数据（登录后才可见数据）（在重复说一下显示重要性）发现许多网站会根据请求头中的Origin值然后设置Access-control-allow-origin，且同时设置了Access-Control-Allow-Credentials为true，导致可以被黑客利用Access-control-allow-origin:null 是可以携带cookie的。也存在特定场景下不需要cookie也能攻击的：基于ip认证的资源跨域读取缓存投毒，增加Vary: Origin http头可以避免使用php函数实现跨域读取资源file_get_contents() 把整个文件读入一个字符串中。语法：file_get_contents(path,include_path,context,start,max_length)参数描述path必需。规定要读取的文件。include_path可选。如果您还想在 include_path（在 php.ini 中）中搜索文件的话，请设置该参数为 '1'。context可选。规定文件句柄的环境。context 是一套可以修改流的行为的选项。若使用 NULL，则忽略。start可选。规定在文件中开始读取的位置。该参数是 PHP 5.1 中新增的。max_length可选。规定读取的字节数。该参数是 PHP 5.1 中新增的。不建议使用，使用这个函数会将资源加载到服务器内存，资源如果过大可能会导致系统假死，宕机情况的发生。最后说一下跨域最好还是使用jsonp来处理，待补充