服务器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. Android 手势

    GestureDetector:手势监听类,通常在View的setOnTouchListener方法中设置TouchListener,在TouchListener的onTouch函数中把MotionE ...

  2. 爬取xml数据之R

    生物信息很多时候要爬数据.最近也看了一些这些方面的. url<-"要爬取的网址" url.html<-htmlParse(url,encoding="UTF- ...

  3. n行m列矩阵顺时针填写1~n*m

    程序效果图如下: 程序参考代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ...

  4. (转)Hadoop Eclipse开发环境搭建

    来源:http://www.cnblogs.com/justinzhang/p/4261851.html This document is from my evernote, when I was s ...

  5. Python中编写精美图形界面(PyQt5)

    纯代码,布局的讲解 见: https://cloud.tencent.com/developer/article/1345469 Qt designer设计文件 .ui转 .py文件,进阶使用 注:不 ...

  6. vue:element-ui时间选择器限制只能点不能输入

    原文链接:点我 <el-form-item label="门店成立日期" prop="storeSetupDate"> <template&g ...

  7. Spring boot配置404、500页面

    Spring boot 配置404页面很简单,如果你访问的url没有找到就会出现spring boot 提示的页面,很明显Spring boot不用配置就可以显示404页面了. 在template下创 ...

  8. [HNOI2015]亚瑟王(期望+DP)

    题解 利用期望的线性性,可以把问题转化为求每一个卡牌造成期望的期望值. 然后我们就需要知道每一个卡牌发动技能的概率. 因为当某一张卡牌发动技能时这一轮会结束,这就很难直接计算了. 我们使用DP 设dp ...

  9. You Probably Don’t Need a Message Queue

    原文地址 I’m a minimalist, and I don’t like to complicate software too early and unnecessarily. And addi ...

  10. java+jsp+sqlserver实现简单的增删改查操作 连接数据库代码

    1,网站系统开发需要掌握的技术 (1)网页设计语言,html语言css语言等 (2)Java语言 (3)数据库 (4)等 2,源程序代码 (1) 连接数据库代码 package com.jaovo.m ...