thinkphp5/tp5介面開發中跨域問題的全部解決方案,options請求的處理
場景還原:由於前後端分離後有可能出現介面的url和我們前端訪問的url不再同一個域名下。這就會導致一個問題,就是瀏覽器的同源策略。對於同源策略如果要正常的使用我們就要處理跨域的問題。當然在跨域中介面傳送前會有一次OPTIONS請求,關於為什麼傳送OPTIONS請求我們在正文中解釋下。在tp5中解決跨域的問題,官方給出的文件是在路由中加allowCrossDomain()但是這對於我們的某些開發情況下來說不是很方便,這篇文章就是從全域性解決跨域問題。用到的tp5知識點有中介軟體和響應的傳送。
為什麼傳送OPTIONS請求
- 獲取伺服器支援的HTTP請求方法;
- 用來檢查伺服器的效能。例如:AJAX進行跨域請求時的預檢,需要向另外一個域名的資源傳送一個HTTP OPTIONS請求頭,用以判斷實際傳送的請求是否安全。
如何處理OPTIONS請求
那麼可定是滿足OPTIONS請求的以上兩點需求即可。也就是我們要在響應中說明我們支援的http請求方法以及伺服器效能,其實在PHP中我們只要用header函式來新增頭部就能達到這個目的,這和框架無關。
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With' );
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
header('Access-Control-Max-Age: 1728000');
在這兒我們真實使用中可以對每個專案設定的更加具體。
tp5中如何處理
OPTIONS響應應該放在哪兒
當然我們應該把OPTIONS的請求放在請求的具體操作之前。在tp5中我們優先想到了中介軟體,因為我們寫中介軟體可以讓某個操作在請求的具體操作之前執行。
生成中介軟體
php think make:middleware CrossDomain
tp5給我們提供了這樣的中介軟體生成cli命令你也可以手動去建立目錄和CrossDomain類,記住中介軟體的入口方法必須是handle($request, \Closure $next)。
在handle中新增OPTIONS請求處理
<?php
/**
* 請求處理中介軟體
* Author: weiyongqiang<[email protected]>
* Date: 2018/9/27
* Time: 11:02
*/
namespace app\http\middleware;
use think\Response;
class CrossDomain
{
public function handle($request, \Closure $next)
{
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
header('Access-Control-Max-Age: 1728000');
if (strtoupper($request->method()) == "OPTIONS") {
return Response::create()->send();
}
return $next($request);
}
}
需要特別注意的是在我們使用header()設定之後我們 檢測請求方法如果是OPTIONS就直接返回一個200響應。這個非常重要,我在看網上其他一些資料說檢測是OPTIONS請求直接exit()就行。但是明確告訴你那樣會出錯,應為handle必須返回一個Response,所以我們返回一個200狀態的響應。
註冊中介軟體
中介軟體寫完必須註冊了才可以生效。你可以全域性註冊或者在模組中註冊。因為我只在api模組中需要跨域,所以我註冊的是模組中介軟體。在api模組中建立middleware.php檔案然後註冊如下:
<?php
/**
* 中介軟體註冊
* Author: weiyongqiang<[email protected]>
* Date: 2018/9/27
* Time: 11:49
*/
return [
\app\http\middleware\CrossDomain::class
];
至此關於tp5的全域性跨域問題解決,大家重點理解原理合理利用。當然開放是雙刃劍必須合理利用。
相關推薦
thinkphp5/tp5介面開發中跨域問題的全部解決方案,options請求的處理
場景還原:由於前後端分離後有可能出現介面的url和我們前端訪問的url不再同一個域名下。這就會導致一個問題,就是瀏覽器的同源策略。對於同源策略如果要正常的使用我們就要處理跨域的問題。當然在跨域中介面傳送前會有一次OPTIONS請求,關於為什麼傳送OPTIONS
CORS 跨域與 TP5中跨域的解決方案
在做專案過程中,使用Vue-element-admin作為前端,ThinkPHP5作為後端框架進行開發,會遭遇跨域問題,本文給出ThinkPHP5解決跨域 1.CORS的概念 CORS(Cross-Origin Resource Sharing 跨源資源共享),當
vue-cli開發環境跨域問題解決方案
前後端分離開發中必要會遇到的問題—跨域。在使用vue開發的時候,開始為了解決跨域問題。採用的是CORS(Cross-origin resource sharing)。後臺在響應頭中新增Access-Control-Allow-Origin。這樣就可以跨域調後臺介
vue-cli 開發中跨域問題和profile模式配置
一、開發環境中跨域 使用 Vue-cli 建立的專案,開發地址是 localhost:8080,需要訪問非本機上的介面http://10.1.0.34:8000/queryRole。不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,通常都需要後臺配置,不過 Vue-cli 建立的
Web開發中跨域的幾種解決方案
隨著Web App的功能越來越強 各種跨域的需求催生了無數的跨域手法。甚至在HTML5標準中都給出了官方的跨域方法, 也是最近應付面試的需要,拿一篇文章來總結既有的各種跨域手段。 這些跨域通訊的方法大致可以分為兩類: 一類是Hack,比如通過title, navigation等物件傳遞資訊,JSONP可
使用http-proxy-middleware解決前端開發中跨域的問題
一、使用http-proxy-middleware中介軟體解決跨域問題 本案例中使用基本的webpack及axios請求資料的外掛 1、後端服務是用tornado建立的一個服務(可以根據自
django與vue開發中跨域請求問題
CSRF(Cross-site request forgery)跨站請求偽造,也被稱為“One Click Attack”或者Session Riding,通常縮寫為CSRF或者XSRF,是一種對網站的惡意利用。儘管聽起來像跨站指令碼(XSS),但它與XSS非常
vue開發中跨域設定,即配置後臺資料
由於專案需要,公司最近的專案需要用到vue.js,本來從來沒有接觸過node.js 之類的開發,導致開發這個很吃力,還有由於不忙,最近一直在看這個,對於vue 的開發,有一個很好的原始碼,大家可以去學習學習下。 https://github.com/Pa
前端CORS請求介面跨域問題解決方案 (古月)
先配置Nginx 先舉例 以下是我們常用的nginx站點配置(PHP網站為例) server { listen 監聽埠; server_name 域名部分; set $root_path 目錄部分; root $root_path; i
mui中 ajax無法跨域問題解決方案
加入頭描述 header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST"); h
使用vue-admin-template 中跨域問題解決
gin conf import 文件 www. pre admin sim chang 1、修改dev.env.js 中的文件 例如: module.exports = merge(prodEnv, { NODE_ENV: ‘"development"‘, ENV
C#進階系列——WebApi 跨域問題解決方案:CORS
dea ati ice pro target default 異常 測試工具 復雜 前言:上篇總結了下WebApi的接口測試工具的使用,這篇接著來看看WebAPI的另一個常見問題:跨域問題。本篇主要從實例的角度分享下CORS解決跨域問題一些細節。 WebApi系列文章
前端-關於CORS跨域的解決方案,面向服務端
red 瀏覽器 環境 和我 methods retrieve name 後臺 一件事 最近自己在寫後臺管理系統的時候,並沒有采用jsp、freemaker、葉子等模板技術,而是由後端提供數據api,前端通過AJAX和JQuery來動態操作頁面上的一些div、table元素,
跨域常見解決方案
div 請求 如果 主域 安全問題 highlight chrom call navig 由於考慮到安全性問題,HTML的同源策略不允許JavaScript進行跨域操作,但是隨著web端功能越來越多,對跨域需求逐漸增大,於是乎便催生了很多解決跨域的方法,通過網絡搜索和資
laravel 5.5 oauth2.0 跨域問題解決方案
title apach war laravel jsonp 另一個 over gin strong 一、laravel-Cors 安裝 在終端執行安裝命令如下: composer require barryvdh/laravel-cors
[轉]No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域訪問解決方案
不能 ade 方式 ole 相同域名 all log head 允許 原 https://blog.csdn.net/zhoucheng05_13/article/details/53580683 No ‘Access-Control-Allow-Origin‘ heade
angularjs跨域post解決方案
前端同學李雷和後臺同學韓梅梅分別在自己電腦上進行開發,後臺介面寫好的時候,李雷改動完就把前端程式碼上傳到gitlab,然後在測試機上從gitlab上拉下來,然後在測試機上移動最新程式碼,最後回到本機重新整理頁面。有時候碰到網速不好的情況傳個git傳了半天,或者李雷剛上傳完發現少寫了一個單詞,加上再傳
WebApi跨域多種解決方案
關於WebAPI跨域踩到的一點坑 最近在嘗試前後端分離的WebAPI+AngularJS方案,在率先處理授權的時候,踩到了一點WebAPI跨域的坑,其實嚴格意義上來說也不算是坑吧,只是我自己對WebAPI不熟悉而已,這裡我與大家分享一下。 先說一下我這邊遇到的情況: 我是在做登入
javaWeb專案跨域問題解決方案:
1.簡單的servlet專案 1.配置一個filter過濾器,過濾所有的請求,並且設定響應頭 package Filter; import javax.servlet.*; import javax.servlet.http.HttpServletRes
vue+django跨域問題解決方案(前後端兩種方案)
1.Vue前端設定代理(方案一) 我們在使用vue-cli啟動專案的時候npm run dev便可以啟動我們的專案了,通常我們的請求地址是以localhost:8080來請求介面資料的,localhost是沒有辦法設定cookie的。 我們可以在vu