laravel开发中跨域的解决方案

前言

众所周知我们大家在用 laravel 进行开发的时候，特别是前后端完全分离的时候，由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) ， 例如 localhost:8000 , 而 laravel 程序又运行在另一个端口，这样就跨域了，而由于浏览器的同源策略，跨域请求是非法的。其实这个问题很好解决，只需要添加一个中间件就可以了。下面话不多说了，来随着小编一起看看详细的解决方案吧。

解决方案：

1、新建一个中间件

php artisan make:middleware EnableCrossRequestMiddleware

2、书写中间件内容

<?php
namespace App\Http\Middleware;
use Closure;
class EnableCrossRequestMiddleware
{
 /**
 * Handle an incoming request.
 *
 * @param \Illuminate\Http\Request $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://localhost:8000',
 ];
 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;
 }
}

$allow_origin 数组变量就是你允许跨域的列表了，可自行修改。

3、然后在内核文件注册该中间件

 protected $middleware = [
 // more
 App\Http\Middleware\EnableCrossRequestMiddleware::class,
 ];

在 App\Http\Kernel 类的 $middleware 属性添加，这里注册的中间件属于全局中间件。
然后你就会发现前端页面已经可以发送跨域请求了。

会多出一次 method 为 options 的请求是正常的，因为浏览器要先判断该服务器是否允许该跨域请求。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • laravel如何开启跨域功能示例详解

    前言 本文主要给大家介绍了关于laravel开启跨域功能的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 跨域的请求 出于安全性的原因,浏览器会限制 Script 中的跨域请求.由于 XMLHttpRequest 遵循同源策略,所有使用 XMLHttpRequest 构造 HTTP 请求的应用只能访问自己的域名,如果需要构造跨域的请求,那么开发者需要配合浏览器做出一些允许跨域的配置. W3C 应用工作组推荐了一种跨资源共享的机制,这种机制让 Web 应用服务器能支持跨

  • laravel开发中跨域的解决方案

    前言 众所周知我们大家在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 laravel 程序又运行在另一个端口,这样就跨域了,而由于浏览器的同源策略,跨域请求是非法的.其实这个问题很好解决,只需要添加一个中间件就可以了.下面话不多说了,来随着小编一起看看详细的解决方案吧. 解决方案: 1.新建一个中间件 php artisan make:middleware Enable

  • Vue项目中跨域问题解决方案

    方法 后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 打开config/i

  • 详解vue-cli3 中跨域解决方案

    此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批) 前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器. 0:前提条件 1:安装vue-lic 2:安装axios  用于发送请求. 1:将任何未知请求转发到代理服务器 如: 前端地址:127.0.0.1 后端地址:127.0.0.2 当访问地址为 127.0.0.1/api,没有匹配到这地址,那么就会被转发到代理服务器127.0.0.2/api module.exports={

  • web开发跨域原因的多种解决方案

    web开发跨域原因的多种解决方案

    目录 跨域原因 JSONP Nginx解决 后端解决 跨域原因 是由于浏览器的同源策略限制; 跨域指: 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 JSONP 这种方式并不适用于开发, 可以说是被完全淘汰, 但是由于实现复杂, 面试官对于这种方案的深究非常追崇. 核心思想: 网页通过添加一个<script>标签的src属性,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来. 缺点: 需要后端配合才能完成只能发送

  • Vue中跨域及打包部署到nginx跨域设置方法

    众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈 为什么要实现前端跨域 一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置

  • Java服务器端跨域问题解决方案

    这篇文章主要介绍了java服务器端跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现在很多开发的 API 都支持 ajax 直接请求,这样就会导致跨域的问题,解决跨域的问题一方面可以从前端,另一方面就是服务器端. 一.Controller类名上方添加@CrossOrigin 注解通过此方式注解则Controller中的所有通过@RequestMapping注解的方法都可以进行跨域请求. 代码如下: @CrossOrigin()

  • IIS的web.config中跨域访问设置方法

    IIS的web.config中跨域访问设置方法

    需求:页面要显示1个图片,但是因为各种原因,导致图片在服务器2上,但是要展示的程序在服务器1 的上面,这样就造成了在显示的时候出现了跨域的问题,本来的思路为直接写个程序进行后台获得图片的路径,然后把图片进行下载出来,然后返回服务器1的图片地址,但是,由于这个周期不确定性和现阶段项目的紧迫性,就放弃了.转为第2中方式,通过js 把图片下载到服务器上..找了下资料和别人沟通了下后,发现不能实现,然后准备用js+canvas 进行实现保存到本地,然后发现好像只能实现保存到本地.然后问题又回到了原点:就

  • 关于SpringBoot与Vue交互跨域问题解决方案

    关于SpringBoot与Vue交互跨域问题解决方案

    目录 浏览器同源策略 一.VUE前端配置代理解决跨域 (1)Vue中让浏览器请求携带cookie (2)vue中配置代理解决跨域 第一步,设置统一访问路径 第二步.配置跨域代理 第三步.测试请求 二.springboot后端配置解决跨域 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 浏览器同源策略 为什么会出现跨域问题? 首先一个定义一定要了解,就是浏览器的同源策略, 什么是浏览器的同源策略, 简单来说就是浏览器发送请求的协议.域名和端口要和服务器接收请求的协议.域名以及端口一致.

  • iOS10 Xcode8开发适配问题及解决方案

    iOS10 Xcode8开发适配问题及解决方案

    前段时间升级了Xcode8,整体来说对OC的影响不大,但是还是跳一个坑,消耗了不少时间.这里总结下遇到的适配问题. 1.权限问题 Xcode8 访问相机.相册等需要权限的地方崩溃 解决办法: 在使用私有权限时,添加Info.plist文件中添加配置: 下面是各种key,需要哪个添哪个 NSBluetoothPeripheralUsageDescription NSCalendarsUsageDescription NSCameraUsageDescription NSContactsUsageD

  • webpack开发跨域问题解决办法

    本文介绍了webpack开发跨域问题解决办法,分享给大家,具体如下: 1. 说明 webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题 2. API 需要代理的 pathname 要加 / module.exports = { devtool: 'cheap-module-source-map', entry: './app/js/index.js' output: { path: path.resolve(__dirname, 'dev'),

随机推荐