服务器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 常用系统服务

    WindowManager:WindowManager服务是全局的唯一的.它会将用户在屏幕上的操作发送给界面上的各个Window,Activity会将顶层控件注册到WindowManager中.Win ...

  2. (转载)你真的理解Android AIDL中的in,out,inout么?

    前言 这其实是一个很小的知识点,大部分人在使用AIDL的过程中也基本没有因为这个出现过错误,正因为它小,所以在大部分的网上关于AIDL的文章中,它都被忽视了——或者并没有,但所占篇幅甚小,且基本上都是 ...

  3. Failed to connect to server

    设置LR浏览器代理解决Failed to connect to server,Connection timed out问题. 虚拟机中,接口测试简单的Get请求,一直提示Failed to conne ...

  4. Thread-local storage

    Thread-local storage (TLS) is a computer programming method that uses static or global memory local ...

  5. express + multer 文件上传入门

    写在前面的 在web开发中,我们经常会遇到图片上传的功能,接下来我们就在express4.15.0框架中利用multer1.3.0模块来实现图片上传 开始敲代码 首先利用express-generat ...

  6. BZOJ 3790 神奇项链(manacher+贪心)

    3790: 神奇项链 Time Limit: 10 Sec  Memory Limit: 64 MB Description 母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小 ...

  7. C语言传参的类型匹配

    有一个这样的问题: 形参const char *p和实参char *c可以匹配 形参const char**p和实参char**c不可以匹配 注:argument和parameter:严格而言,par ...

  8. vue-cli解析

    前言 这段时间,算是空出手来写几篇文章了.由于很久都没有时间整理现在所用的东西了,所以,接下来会慢慢整理出一些文档来记录前段时间的工作和生活. 这篇文章的主题是vue-cli的理解.或许,很多人在开发 ...

  9. 【codeforces 816A】Karen and Morning

    [题目链接]:http://codeforces.com/contest/816/problem/A [题意] 让你一分钟一分钟地累加时间; 问多长时间以后是个回文串; [题解] reverse之后如 ...

  10. MS ACCESS MID函数

    select * from GongCheng where MID(GCWYBH,3,8)='" + time.Date.ToString("yyyyMMdd") + & ...