ThinkPHP 5.1 跨域配置方法

因为最近的项目采用了API接口开发方式，后端需要配置跨域的规则以便前端能够访问。

系统采用的框架为 ThinkPHP，版本 5.1.19

关于OPTIONS请求

由于前端的知识不是很熟悉，查阅了网上的资料得知，OPTIONS 请求是在 AJAX 发送请求前发送的一个验证请求，该请求会验证一系列规则，若符合规则则会发送实际的 GET 或 POST 请求，跨域的规则也是 OPTIONS 请求时进行验证的。

遇到的问题

按照网上大部分关于跨域请求的配置，基本都是以下三行代码：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS,PATCH');

把这三行代码放到 /route/route.php，/route/api.php，/public/index.php 以及受访问的控制器文件头部均出现以下报错信息：

Failed to load http://url.com/main/info: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'null' is therefore not allowed access.The response had HTTP status code 404.

说明配置并没有生效。

查阅 ThinkPHP 的文档，文档给出的例子：

Route::get('new/:id', 'News/read')
  ->ext('html')
  ->allowCrossDomain();

意思是只需要在路由的尾部添加 allowCrossDomain() 即可，所以我在每个需要进行跨域访问的路由后都添加了 ->allowCrossDomain()，问题得以解决。

另外的问题

由于前端的 AJAX 请求通常需要携带 token 验证，所以还需要将 token 添加到 Access-Control-Allow-Headers

文档的例子是

Route::get('new/:id', 'News/read')
  ->ext('html')
  ->header('Access-Control-Allow-Origin','thinkphp.cn')
  ->header('Access-Control-Allow-Credentials', 'true')
  ->allowCrossDomain();

我按照上面的方法添加了 ->header('Access-Control-Allow-Headers','token') ，再次请求出现了下面的报错：

Failed to load: http://url.com/main/info: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

header 的配置没有生效。

解决办法：将 header('Access-Control-Allow-Headers: content-type,token'); 添加到 入口文件 /public/index.php 即可。

以上这篇ThinkPHP 5.1 跨域配置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • PHP 网站修改默认访问文件的nginx配置

    搭建好lnmp后,有时候并不需要直接访问index.php,配置其他的默认访问文件比如index.html这时候需要配置一下nginx才能访问到你想要设置的文件 直接上代码,如下是我的配置的一份简单的nginx到php-fpm的站点,该站点默认访问目录/ecmoban/www/index.html server { listen 80; location / { root /ecmoban/www; index index.html index.php index.htm; } error_pa

  • Nginx下ThinkPHP5的配置方法详解

    本文主要给大家介绍了关于Nginx下ThinkPHP5的配置方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: url里public目录的隐藏 出于安全的考虑,TP5的入口文件改成放在public下了,因为这样的话能防止被恶意用户访问到"/thinkphp/"."/vendor/"等等这些目录下的文件.所以当你以之前的习惯将网站documentroot配置为项目根目录的时候就会需要在url后面加上/public/来访问.当然可能也会有童鞋把入口文件放

  • 关于PHP隐藏入口文件问题

    关于PHP隐藏入口文件问题

    第一步:开启apache重写模块 重启apache LoadModule rewrite_module modules/mod_rewrite.so 第二步:在项目根目录与入口文件同级的目录重写分布式配置文件.htaccess 内容如下: <IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On #分布式配置文件 隐藏入口文件 RewriteCond %{REQUEST_FILENAME} !-d RewriteCond

  • 浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法

    1,心血来潮,把ThinkPHP项目部署到了nginx上,以上是在apache上跑的.突然发现nginx不支持pathinfo功能,难怪在TP中调怎么都没管用. 2,开始上文件了,比网上其他一些杂的好多了: server { listen 80; #listen [::]:80; server_name www.tp.com tp.com; index index.html index.htm index.php default.html default.htm default.php; roo

  • ThinkPHP 5.1 跨域配置方法

    因为最近的项目采用了API接口开发方式,后端需要配置跨域的规则以便前端能够访问. 系统采用的框架为 ThinkPHP,版本 5.1.19 关于OPTIONS请求 由于前端的知识不是很熟悉,查阅了网上的资料得知,OPTIONS 请求是在 AJAX 发送请求前发送的一个验证请求,该请求会验证一系列规则,若符合规则则会发送实际的 GET 或 POST 请求,跨域的规则也是 OPTIONS 请求时进行验证的. 遇到的问题 按照网上大部分关于跨域请求的配置,基本都是以下三行代码: header("Acce

  • jquery ajax结合thinkphp的getjson实现跨域的方法

    本文实例讲述了jquery ajax结合thinkphp的getjson实现跨域的方法.分享给大家供大家参考,具体如下: jquery中post的应该是不能跨域,网上说get的可以跨域,但是我试了一下也不行,然后就进行最后的拼搏getjson,结果成功,哈哈 js处写作: $.getJSON( "/index.php/Index/test", function(data){ alert(data.dd); } ); 语法: jQuery.getJSON(url,[data],[call

  • vue-cli3配置与跨域处理方法

    安装 vue-cli3 环境准备 1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 . npm uninstall vue-cli -g 2. 检查 node.js 版本. vue-cli3 需要 node 版本大于8.9.在cmd中输入 node -v 查看版本.如果版本过低,请先去 node官网 中下载高版本. 安装脚手架 vue-cli3的包名有 vue-cli 改为 @vue/cli . 使用npm全局安装vue-cli3. npm inst

  • vue-cli 3.x 配置Axios(proxyTable)跨域代理方法

    vue-cli 3.x 的beta版本,基于iview做的公司的角色权限管理平台. 3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和prod.dev.js,看了教程,要自己在根目录建vue.config去配置,如果你用axios,关于代理的配置,如下: 在vue.config.js中配置: 以上这篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

  • Springboot 跨域配置无效及接口访问报错的解决方法

    跨域配置如下,Springboot 版本为 2.4.1 ///跨域访问配置 @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.setAllowCredentials(true); //sessionid 多次访问一致 co

  • vue-cli3跨域配置的简单方法

    vue-cli3跨域配置: 在vue-resource的数据请求中,一般我们会将请求方式GET/POST修改为jsonp的请求方式就可以实现跨域. 但是对于只支持GET/POST两种请求方式的api,修改jsonp,就会出错.需要进行跨域的配置. (1)在文件根目录下,创建vue.config.js配置文件,具体配置如下: module.exports={ //将baseUrl:'/api',改为baseUrl:'/' baseUrl:'/', devServer:{ '/api':{ targ

  • Springmvc ajax跨域请求处理方法实例详解

    上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha

  • spring cloud如何修复zuul跨域配置异常的问题

    前言 本文主要给大家介绍一下在zuul进行跨域配置的时候出现异常该如何解决的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 异常 The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed 实例 Access-Control-Allow-Credentials:true Access-Control-Allow-Credentials:t

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • vue实现跨域的方法分析

    vue实现跨域的方法分析

    本文实例讲述了vue实现跨域的方法.分享给大家供大家参考,具体如下: 在请求的资源上没有"访问控制允许源"标头.因此,"http://LoalHoal:8081"是不允许访问的. 出现这个报错就说明,浏览器限制了跨域,需要设置跨域 一.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方

随机推荐