ThinkPHP 5 AJAX跨域请求头设置实现过程解析

2024-08-31 07:04:32

最近用thinkphp做项目，在测试环境时，存在接口的测试问题。在tp官网也没能找到相关的解决方法。自已看了一下源码，有如下的解决方案。

在项目目录下面，创建common/behavior/CronRun.php文件，文件内容如下：

<?php
/**
 * Created by PhpStorm.
 * User: LiuYang
 * Date: 2017/3/9
 * Time: 19:37
 */

namespace app\common\behavior;

use think\Exception;
use think\Response;

class CronRun
{
  public function run(&$dispatch){
    $host_name = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : "*";
    $headers = [
      "Access-Control-Allow-Origin" => $host_name,
      "Access-Control-Allow-Credentials" => 'true',
      "Access-Control-Allow-Headers" => "x-token,x-uid,x-token-check,x-requested-with,content-type,Host"
    ];
    if($dispatch instanceof Response) {
      $dispatch->header($headers);
    } else if($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
      $dispatch['type'] = 'response';
      $response = new Response('', 200, $headers);
      $dispatch['response'] = $response;
    }
  }
}

接着在项目中（tags.php）配置行为动作，如下：

<?php
// +----------------------------------------------------------------------
// | ThinkPHP [ WE CAN DO IT JUST THINK ]
// +----------------------------------------------------------------------
// | Copyright (c) 2006~2016 http://thinkphp.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: liu21st <liu21st@gmail.com>
// +----------------------------------------------------------------------

// 应用行为扩展定义文件
return [
  // 应用初始化
  'app_init'   => [],
  // 应用开始
  'app_begin'  => [
    'app\\common\\behavior\\CronRun'
  ],
  // 模块初始化
  'module_init' => [],
  // 操作开始执行
  'action_begin' => [],
  // 视图内容过滤
  'view_filter' => [],
  // 日志写入
  'log_write'  => [],
  // 应用结束
  'app_end'   => [
    'app\\common\\behavior\\CronRun'
  ],
];

ok，以上几步就解决跨域请求问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

thinkPHP利用ajax异步上传图片并显示、删除的示例

近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题. 表单文件form: <form method="post" enctype="multipart/form-data"> <div style="margin: 20px 20px 20px 10px;"
Thinkphp5框架ajax接口实现方法分析

本文实例讲述了Thinkphp5框架ajax接口实现方法.分享给大家供大家参考,具体如下: 前一篇讲到thinkphp5从数据库获取数据之后赋给视图view,前一篇从数据渲染方式来说是服务端数据渲染,这一章则是浏览器端数据渲染.按照知识总结依据来划分,这是两种不同的技术场景. 下面介绍具体的ajax接口实现代码. 首先是html代码部分,我的访问地址为:http://app.write.com/thinkphp/public/index.php/index/index/api,这里没有省略入口文
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作.分享给大家供大家参考,具体如下: Ajax最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 最近在用tp5开发企业微应用,很有收获,觉得最需要注意的是thinkphp
ThinkPHP框架结合Ajax实现用户名校验功能示例

本文实例讲述了ThinkPHP框架结合Ajax实现用户名校验功能.分享给大家供大家参考,具体如下: 在模板文件中通过ajax获取到用户名,然后在控制器中将用户名与数据库比较,返回校验结果给模板文件. 模板文件路径shop/Home/View/User/register.html  <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q
ThinkPHP5 通过ajax插入图片并实时显示(完整代码)

单张图片上传展示图: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax上传图片练习</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结

本文实例讲述了TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法.分享给大家供大家参考,具体如下: 方法一: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串,这个是jquery提供的方法前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax交互</title> <script s
ThinkPHP5.1+Ajax实现的无刷新分页功能示例

本文实例讲述了ThinkPHP5.1+Ajax实现的无刷新分页功能.分享给大家供大家参考,具体如下: 无刷新分页可以减轻服务器负担,利用Ajax技术,请求部分信息,提高网站访问速度,是网站建设的必备技术. 需要在后台展示自定义属性列表(lst.html),其中的列表部分摘出来,放到(paginate1.html)中: <div class="row"> <div class="col-sm-12"> <div class="i
thinkphp5 + ajax 使用formdata提交数据（包括文件上传）后台返回json完整实例

本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json.分享给大家供大家参考,具体如下: 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u9012\u6210\u529f\uff01"} 前端jquery ajax提交formdata $.ajax({
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解

本文实例讲述了thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果.分享给大家供大家参考,具体如下: 用过百度搜索的人应该都知道这个效果,今天我用ThinkPHP+Mysql+Ajax来实现这样的一个效果,首先我把所有的代码都先给大家,最后再来讲解. 百度即时搜索效果图运行效果图数据库截图城市表学校表控制层代码(SchoolController.class.php) <?php namespace Wechat\Controller; use Think\Controll
ThinkPHP 5 AJAX跨域请求头设置实现过程解析

最近用thinkphp做项目,在测试环境时,存在接口的测试问题.在tp官网也没能找到相关的解决方法.自已看了一下源码,有如下的解决方案. 在项目目录下面,创建common/behavior/CronRun.php文件,文件内容如下: <?php /** * Created by PhpStorm. * User: LiuYang * Date: 2017/3/9 * Time: 19:37 */ namespace app\common\behavior; use think\Exception
jQuery.ajax 跨域请求webapi设置headers的解决方案

解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息方能实现. 1.第一步服务端设置响应头,在webapi的web.config做如下设置 <system.webServer> <httpProtocol>  <customHeaders> <add name="Access-Control-All
Ajax如何进行跨域请求?Ajax跨域请求的原理

本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容如下下面我们在本地建两个站点演示一下第一步首先我们在本地搭建好一个Apache服务器:下载地址: 第二步服务器配置好以后,在本地配置好两个虚拟的域名: 第三步我们在C盘建一个文件夹命名为"HTML5": 第四步找到Apache虚拟主机的配置文件,然后打开配置文件第五步在第三步建的HTML5文件夹下分别建一个文件夹a和文件夹b; 第六步修改Apache虚拟主机的配置文件,如图第七步修改一下host文件,添加a
用iframe设置代理解决ajax跨域请求问题

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题.于是想用代理的方式来解决这个跨域问题. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 方案:在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById("proxy&q
AJAX跨域请求数据的四种方法(实例讲解)

由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行实例对象 var xhr = new XMLHttpRequest(); 注意点在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦在这里我就不写了通过该对象进行获取获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请
Vue Ajax跨域请求实例详解

一.设置config/index.js || proxyTable添加 proxyTable: { '/api': { target: 'http://192.168.48.239:8080/ydzl', changeOrigin: true, pathRewrite: { '^/api': '' } } 二.mian.js 添加vue全局属性 Vue.prototype.HOST = '/api' 三.如果是post的话 1.修改数据格式 transformRequest: [function
基于CORS实现WebApi Ajax 跨域请求解决方法

概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是众多
深入浅析Nginx实现AJAX跨域请求问题

AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Ac
Nginx服务器中处理AJAX跨域请求的配置方法讲解

Nginx 实现AJAX跨域请求 AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Control-Allow-Credentials' 'true
Ajax跨域请求COOKIE无法带上的完美解决办法

1.原生ajax请求方式: 1 var xhr = new XMLHttpRequest(); 2 xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); 3 xhr.withCredentials = true; //支持跨域发送cookies 4 xhr.send(); 2.jquery的ajax的post方法请求: $.ajax({ type: "POST", url: &qu

ThinkPHP 5 AJAX跨域请求头设置实现过程解析

相关推荐

随机推荐