服务器A请求服务器B的接口,那么一般会出现跨域问题。全解跨域请求处理办法


XMLHttpRequest cannot load http://api.console.vms3.com/api/user. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' istherefore not allowed access.

意思就是服务器响应不允许跨域访问.

那我们就需要让服务器支持跨域访问, 也就是在响应头部中添加

```'Access-Control-Allow-Origin: *'
```

第一步: 创建中间件

创建 `app/Http/Middleware/AccessControlAllowOrigin.php` middleware 把 'Access-Control-Allow-Origin: *' 写入头部.
app/Http/Middleware/AccessControlAllowOrigin.php
<?php namespace App\Http\Middleware; use Closure;
use Illuminate\Support\Facades\Auth; class AccessControlAllowOrigin
{
/**
*
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: *");
header("Access-Control-Allow-Headers: Content-Type,Access-Token");
header("Access-Control-Expose-Headers: *"); return $next($request);
} }

第二步: 注册路由

注册这个 middlewarekernel 中.
分别在 protected $middleware 数组中和 protected $routeMiddleware 数组中
添加我们刚才创建的那个文件class名, 使用 cors 这个别名.

第三步: 设置中间件保护接口

然后在设置它保护 api , 就是$middlewareGroups['api'] 的数组中添加它的别名, 本文中是 'cors'
app/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 = [
\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
\App\Http\Middleware\AccessControlAllowOrigin::class,
]; /**
* The application's route middleware groups.
*
* @var array
*/
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
// \Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
], 'api' => [
'throttle:60,1',
'bindings',
'cors'
],
]; /**
* The application's route middleware.
*
* These middleware may be assigned to groups or used individually.
*
* @var array
*/
protected $routeMiddleware = [
'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'cors' => \App\Http\Middleware\AccessControlAllowOrigin::class,
];
}

第四步:在路由中添加路由

Route::middleware('cors')->group(function () {
//
});

原文地址:https://segmentfault.com/a/1190000016815828

Laravel API 允许跨域访问的更多相关文章

  1. ASP.net Web API允许跨域访问解决办法

    来源 http://blog.csdn.net/wxg_kingwolfmsncn/article/details/48545099 遇到此跨域访问问题,解决办法如下:   方法一:   1. 在we ...

  2. AngulaJs+Web Api Cors 跨域访问失败的解决办法

    //在服务的WebConfig文件中添加以下代码即可 //如节点已存在请去掉 <system.webServer> <httpProtocol> <customHeade ...

  3. ASP.NET Web API 启用跨域访问

    自定义特性 要在WebApi中实现JSONP,一种方式是实现自定义特性  http://stackoverflow.com/questions/9421312/jsonp-with-asp-net-w ...

  4. 在dotnet core web api中支持CORS(跨域访问)

    最近在写的Office add-in开发系列中,其中有一个比较共性的问题就是在add-in的客户端脚本中访问远程服务时,要特别注意跨域访问的问题. 关于CORS的一些基本知识,请参考维基百科的说明:h ...

  5. Laravel API跨域访问的实现步骤

    本篇文章给大家带来的内容是关于Laravel API跨域访问的实现步骤,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 服务器A请求服务器B的接口,那么一般会出现跨域问题. 1 XML ...

  6. 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示

    随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是 ...

  7. ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法

    原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebServi ...

  8. 如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。

    由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口, ...

  9. REST API之前端跨域访问

    关键字:跨域访问,cross-origin, NodeJS, REST API, JavaScript, Access-Control-Allow-Origin 1.新建并运行一个 NodeJS的se ...

随机推荐

  1. HTML的常用标签属性及使用时需注意的一些细节

    前言 本篇随笔的主要是复习一下常用的一些HTML(Hyper Text Markup Language)标签及其属性,并总结一些使用过程中需要注意的一些细节,本篇提及的常用标签主要有: iframe标 ...

  2. 51nod 1102 面积最大的矩形 && 新疆大学OJ 1387: B.HUAWEI's billboard 【单调栈】+【拼凑段】(o(n) 或 o(nlog(n))

    题面1:  题面2:  两道题除了数据范围不同,没有任何差异,两道题都可以o(n)(单调栈),o(nlog(n))(我自己的做法)解决. 解题思路1:(单调栈) 对于每个点找到右边第一个比它小的位 ...

  3. 路飞学城Python-Day10(practise)

    作业:现要求你写一个简单的员工信息增删该查程序,需求如下:当然此表在文件存储时可以这样表示1,Alex Li,22,13651054608,IT,2013-04-012,Jack Wang,28,13 ...

  4. H5发起微信支付

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. js的onclick和jq的click以及on和bind的区别

    onclick和click,只能静态绑定点击事件:bind的可以一次绑定多个事件(click/onmouseover等):on可以动态的绑定事件,当页面加载完成调用on即可

  6. 史上最简单的在 Yii2.0 中将数据导出成 Excel

    在 vendor/yiisoft/yii2/helpers/ 创建一个 Excel.php <?php namespace yii\helpers;   class Excel{         ...

  7. 小程序使用wepy框架自定义loading组件

    1:定义组 <template> <view class="app-loading-container" style="{{options.cssTex ...

  8. mycat详细

    MyCAT的优势基于阿里开源的Cobar产品而研发,Cobar的稳定性.可靠性.优秀的架构和性能以及众多成熟的使用案例使得MYCAT一开始就拥有一个很好的起点,站在巨人的肩膀上,我们能看到更远.业界优 ...

  9. Docker搭建MySQL的PXC集群

    原文:Docker搭建MySQL的PXC集群 一.简介 PXC属于一套近乎完美的mysql高可用集群解决方案,相比那些比较传统的基于主从复制模式的集群架构MHA和MM+keepalived,galer ...

  10. 05004_Linux的其他命令和权限命令

    1.其他命令 (1)显示当前所在位置 命令:pwd (2)搜索命令 a.命令:grep 要搜索的字符串 要搜索的文件 示例:搜索/etc/sudu.conf文件中包含字符串to的行 b.搜索/etc/ ...