原文地址:

跨域的请求

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

W3C 应用工作组推荐了一种跨资源共享的机制,这种机制让 Web 应用服务器能支持跨站访问控制,从而使得安全的进行跨站数据传输成为可能,该机制通过几种方式来对原有模式进行了扩展:

  • 响应的头部应该追加 Access-Control-Allow-Orign,用来表明哪些请求源被允许访问资源内容
  • 浏览器会对请求源和响应中的值进行匹配验证
  • 对于跨域的请求,浏览器会预发送一个非简单方式的请求,来判断给定资源是否准备接受跨域资源访问
  • 服务端应用通过检查请求头部的 Orign 来判定请求是否跨域。

跨源资源共享标准

跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。另外,对哪些会对服务器数据造成破坏性响应的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些 MIME 类型的 POST 请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获取知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据)。

跨源共享标准需要浏览器和服务端共同配合才能完成,目前浏览器厂商已经可以将请求部分自动完成,所以跨源资源访问的重点还是在于服务器端。

下面列出一些标准中可用的响应头和请求头。

Response Header

  • Access-Control-Allow-Origin : 指明哪些请求源被允许访问资源,值可以为 "*","null",或者单个源地址。
  • Access-Control-Allow-Credentials : 指明当请求中省略 creadentials 标识时响应是否暴露。对于预请求来说,它表明实际的请求中可以包含用户凭证。
  • Access-Control-Expose-Headers : 指明哪些头信息可以安全的暴露给 CORS API 规范的 API。
  • Access-Control-Max-Age : 指明预请求可以在预请求缓存中存放多久。
  • Access-Control-Allow-Methods : 对于预请求来说,哪些请求方式可以用于实际的请求。
  • Access-Control-Allow-Headers : 对于预请求来说,指明了哪些头信息可以用于实际的请求中。
  • Origin : 指明预请求或者跨域请求的来源。
  • Access-Control-Request-Method : 对于预请求来说,指明哪些预请求中的请求方式可以被用在实际的请求中。
  • Access-Control-Request-Headers : 指明预请求中的哪些头信息可以用于实际的请求中。

Request Header

  • Origin : 表明发送请求或预请求的来源。
  • Access-Control-Request-Method : 在发送预请求时带该请求头,表明实际的请求将使用的请求方式。
  • Access-Control-Request-Headers : 在发送预请求时带有该请求头,表明实际的请求将携带的请求头。

中间件

在 Laravel 中允许跨域请求,我们可以在app/Http/Middleware/文件夹下构建一个追加响应的中间件Cors.php,用来添加专门处理跨域的请求的响应头:

<?php
namespace App\Http\Middleware; use Closure;
use Response;
class Cors {     /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {         $response = $next($request);
        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
        $response->header('Access-Control-Allow-Credentials', 'false');
        return $response;
    } }

使用中间件

在app/Http/Kernel.php文件中protected $routeMiddleware处增加'cors' => \App\Http\Middleware\Cors::class,。

需要跨域请求的路由:

Route::group(['middleware'=>'cors'], function() {
    Route::any('/send','SendController@index');
});

其中有以下需要注意的地方:

  • 对于跨域访问并需要伴随认证信息的请求,需要在 XMLHttpRequest 实例中指定 withCredentials 为 true。
  • 这个中间件你可以根据自己的需求进行构建,如果需要在请求中伴随认证信息(包含 cookie,session)那么你就需要指定 Access-Control-Allow-Credentials 为 true, 因为对于预请求来说如果你未指定该响应头,那么浏览器会直接忽略该响应。
  • 在响应中指定 Access-Control-Allow-Credentials 为 true 时,Access-Control-Allow-Origin 不能指定为 *
  • 后置中间件只有在正常响应时才会被追加响应头,而如果出现异常,这时响应是不会经过中间件的。

Laravel增加CORS中间件完成跨域请求的更多相关文章

  1. .Net Core 3.0 Api json web token 中间件签权验证和 Cors 中间件处理跨域请求

    第一步:在Nuget上安装"Microsoft.AspNet.WebApi.Cors"包,并对api controller使用[EnableCors]特性以及Microsoft.A ...

  2. Spring MVC配置CORS(解决跨域请求)

    1. CORS 简介 同源策略(same origin policy)是浏览器安全的基石.在同源策略的限制下,非同源的网站之间不能发送 ajax 请求的. 为了解决这个问题,w3c 提出了跨源资源共享 ...

  3. c# ASP.NET Core2.2利用中间件支持跨域请求

    1.public void Configure(IApplicationBuilder app, IHostingEnvironment env)方法里面 不要加上:app.UseCors(); 2. ...

  4. ASP.NET Core 利用中间件支持跨域请求

    方法1: 在Startup的ConfigureServices()中添加services.AddCors()在Startup的Configure()中添加app.UseCors(); 保证其在app. ...

  5. 在 ASP.NET Core 中启用跨域请求(CORS)

    本文介绍如何在 ASP.NET Core 的应用程序中启用 CORS. 浏览器安全可以防止网页向其他域发送请求,而不是为网页提供服务. 此限制称为相同源策略. 同一源策略可防止恶意站点读取另一个站点中 ...

  6. ASP.NET Core 启用跨域请求

    本文翻译整理自:https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1 一 .Cross-Orig ...

  7. django之CORS跨域请求

    对于想要利用django框架实现前后端分离,首要的问题是解决跨域请求的问题,什么是跨域请求?简单来说就是当前发起的请求的域与该请求指向的资源所在的域不一致.当协议+域名+端口号均相同,那么就是同一个域 ...

  8. leyou_03_cors解决ajax的跨域请求问题

    1.为什么会有跨域问题 因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击. 因此:跨域问题 是针对ajax的一种限制 ...

  9. js跨域请求解决方案

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.&l ...

随机推荐

  1. 使用JSP/Servalet技术开发新闻发布系统------JSP数据交互一

    什么是内置对象 JSP内置对象是 Web 容器创建的一组对象,不用通过手动new就可以使用 JSP中的九大内存对象  request 请求对象  response 响应对象  out   输出对象  ...

  2. 使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象

    JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windo ...

  3. log4j2配置文件log4j2.xml详解

    配置全解 1.缺省默认配置文件 <?xml version="1.0" encoding="UTF-8"?> <Configuration s ...

  4. sql server 存储过程中,调用事务 tran

      Sql Server 2005/2008中提供了begin tran,commit tran和rollback tran来使用事务. begin tran表示开始事务, commit tran表示 ...

  5. 【原创】go语言学习(十)Map类型

    目录 声明和初始化 基本操作 map排序 map类型的切⽚片 课后作业 声明和初始化 1.map类型是⼀一个key-value的数据结构. //var a map[key的类型]value类型 var ...

  6. 解决Ubuntu19.04无法安装SecureCRT

    推荐下载SecureCRT的tar包 在ubuntu19.04上安装SecureCRT的时候,报错libssl1.0.0-xxx没有安装 解决办法:下载并安装libssl1.0.0_1.0.1t-1+ ...

  7. nestjs中typeorm进行事物操作

    https://typeorm.io/#/transactions 两种方法

  8. checkbox后台传个list显示和回显的页面代码C标签

        <c:forEach items="${listtest}" var="provinces">        <input type= ...

  9. C++删除字符串的前后空格

    函数: string trim(string& str) { str.erase(0, str.find_first_not_of(" \t")); // 去掉头部空格 s ...

  10. Synchronized 有几种用法

    我们都知道 Synchronized 是线程安全同步用的,大部分程序可能只会用到同步方法上面.其实 Synchronized 可以用到更多的场合,栈长列举了以下几个用法. 1.同步普通方法 这个也是我 ...