Ajax 設置Access-Control-Allow-Origin實現跨域訪問

之前遇到的問題整理

ajax跨域訪問是一個老問題了,解決方法很多,比較常用的是JSONP方法,JSONP方法是一種非官方方法,而且這種方法只支持GET方式,不如POST方式安全。


即使使用jquery的jsonp方法,type設為POST,也會自動變為GET。


官方問題說明:

“script”: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, “_=[TIMESTAMP]“, to the URL unless the cache option is set to true.Note: This will turn POSTs into GETs for remote-domain requests.


如果跨域使用POST方式,可以使用創建一個隱藏的iframe來實現,與ajax上傳圖片原理一樣,但這樣會比較麻煩。


因此,通過設置Access-Control-Allow-Origin來實現跨域訪問比較簡單。


例如:客戶端的域名是www.client.com,而請求的域名是www.server.com

如果直接使用ajax訪問,會有以下錯誤

XMLHttpRequest cannot load http://www.server.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.client.com' is therefore not allowed access.


在被請求的Response header中加入

[php]?view plaincopy
  1. //?指定允許其他域名訪問??
  2. header('Access-Control-Allow-Origin:*');??
  3. //?響應類型??
  4. header('Access-Control-Allow-Methods:POST');??
  5. //?響應頭設置??
  6. header('Access-Control-Allow-Headers:x-requested-with,content-type');??

就可以實現ajax POST跨域訪問了。


代碼如下:

client.html?路徑:http://www.client.com/client.html

[html]?view plaincopy
  1. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">??
  2. <html>??
  3. ?<head>??
  4. ??<meta?http-equiv="content-type"?content="text/html;charset=utf-8">??
  5. ??<title>?跨域測試?</title>??
  6. ??<script?src="//code.jquery.com/jquery-1.11.3.min.js"></script>??
  7. ?</head>??
  8. ??
  9. ?<body>??
  10. ????<div?id="show"></div>??
  11. ????<script?type="text/javascript">??
  12. ????$.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"})??
  13. ??????.done(function(data){??
  14. ????????document.getElementById("show").innerHTML?=?data.name?+?'?'?+?data.gender;??
  15. ??????});??
  16. ????</script>??
  17. ?</body>??
  18. </html>??

server.php?路徑:http://www.server.com/server.php

[php]?view plaincopy
  1. <?php??
  2. $ret?=?array(??
  3. ????'name'?=>?isset($_POST['name'])??$_POST['name']?:?'',??
  4. ????'gender'?=>?isset($_POST['gender'])??$_POST['gender']?:?''??
  5. );??
  6. ??
  7. header('content-type:application:json;charset=utf8');??
  8. header('Access-Control-Allow-Origin:*');??
  9. header('Access-Control-Allow-Methods:POST');??
  10. header('Access-Control-Allow-Headers:x-requested-with,content-type');??
  11. ??
  12. echo?json_encode($ret);??
  13. ?>??

Access-Control-Allow-Origin:*?表示允許任何域名跨域訪問

如果需要指定某域名才允許跨域訪問,只需把Access-Control-Allow-Origin:*改為Access-Control-Allow-Origin:允許的域名

例如:header('Access-Control-Allow-Origin:http://www.client.com');


如果需要設置多個域名允許訪問,這里需要用php處理一下

例如允許 www.client.com 與 www.client2.com 可以跨域訪問

server.php 修改為

[php]?view plaincopy
  1. <?php??
  2. $ret?=?array(??
  3. ????'name'?=>?isset($_POST['name'])??$_POST['name']?:?'',??
  4. ????'gender'?=>?isset($_POST['gender'])??$_POST['gender']?:?''??
  5. );??
  6. ??
  7. header('content-type:application:json;charset=utf8');??
  8. ??
  9. $origin?=?isset($_SERVER['HTTP_ORIGIN'])??$_SERVER['HTTP_ORIGIN']?:?'';??
  10. ??
  11. $allow_origin?=?array(??
  12. ????'http://www.client.com',??
  13. ????'http://www.client2.com'??
  14. );??
  15. ??
  16. if(in_array($origin,?$allow_origin)){??
  17. ????header('Access-Control-Allow-Origin:'.$origin);??
  18. ????header('Access-Control-Allow-Methods:POST');??
  19. ????header('Access-Control-Allow-Headers:x-requested-with,content-type');??
  20. }??
  21. ??
  22. echo?json_encode($ret);??
  23. ?> ?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247651.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247651.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247651.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

vue工程webpack模板配置說明

vue工程webpack模板下的配置文件非常多&#xff0c;只能在實際開發過程中反復熟悉&#xff0c;才能漸漸體會官方將配置文件拆分細化的合理性。 主要配置文件中代碼的作用從網上摘錄了比較全的一份注釋&#xff0c;做下記錄。 dev-server.js 開發服務端配置 require(./check-v…

目錄的拼接

找到被拼接文件所在的目錄&#xff0c;然后進行拼接 import os 獲取當前目錄&#xff1a; os.path.dirname(__file__) 如下&#xff0c;被拼接文件所在目錄與當前目錄的上級目錄在同一文件夾下&#xff1a; os.path.join(os.path.dirname(os.path.dirname(__file__)),‘文件夾路…

vue-resource 攔截器(interceptor)的使用

攔截器-interceptor 在現代的一些前端框架上&#xff0c;攔截器基本上是很基礎但很重要的一環&#xff0c;比如Angular原生就支持攔截器配置&#xff0c;VUE的Axios模塊也給我們提供了攔截器配置&#xff0c;那么攔截器到底是什么&#xff0c;它有什么用&#xff1f;攔截器能幫…

【GamePlay】入門篇

【GamePlay】入門篇 游戲性編程是指通過一系列游戲系統將游戲想法變成現實的過程。 本次的簡例以NPC設計為主。 通常在進行腳本設計前&#xff0c;對NPC的屬性進行基本的添加和設定&#xff0c;諸如動畫系統、物理系統等等。 1.動畫系統 添加Animator組件&#xff0c;綁定骨骼。…

vue axios POST請求中參數以form data和request payload形式的原因

HTTP請求中&#xff0c;如果是get請求&#xff0c;那么表單參數以namevalue&name1value1的形式附到url的后面&#xff0c;如果是post請求&#xff0c;那么表單參數是在請求體中&#xff0c;也是以namevalue&name1value1的形式在請求體中。通過chrome的開發者工具可以看…

vue-resource使用

vue-resource是一個http請求插件&#xff0c;遵循promise&#xff0c;類似jquery中ajax操作。 vue-resource已不被官方推薦&#xff0c;官方推薦axios插件來操作http協議。 vue-resource中提供的方法 get(url, [options]) head(url, [options]) delete(url, [options]) jso…

HttpHttps

http協議與https Http 客戶端發送一個HTTP請求到服務器的請求消息包括以下格式&#xff1a; **請求行&#xff08;request line&#xff09;、請求頭部&#xff08;header&#xff09;、空行 和請求數據四個部分組成。** Get請求例子&#xff0c;使用Charles抓取的request&…

vue2使用axios post跳坑,封裝成模塊

終于將vue-resource替換成axios了&#xff0c;其中像application/x-www-form-urlencoded發送的頭信息以及返回的response結果這兩點都需要注意一下。 其實https://github.com/mzabriskie/axios也有說明的。因為我在vue-resource中使用了Vue.http.options.emulateJSON true;&am…

axios使用

axios和vue-resource一樣&#xff0c;是一個vue中操作http的插件&#xff0c;遵循promise&#xff0c;vue官方也推薦使用axios。 安裝axios npm i axios -S axios也是在運行時需要的&#xff0c;所以要保存在dependencies中。 引入axios import axios from axios Vue.proto…

jQuery length 和 size()區別

jQuery length和size()區別總結如下&#xff1a; 1.length是屬性&#xff0c;size()是方法。 2.如果你只是想獲取元素的個數&#xff0c;兩者效果一樣既 $("img").length 和 $("img").size() 獲取的值是一樣的&#xff1b;但是如果是獲取字符串的長…

一些關于自己的未來的東西

2019.7.4 自己大一建立對編程的基礎認識&#xff0c;確實培養了一些興趣&#xff0c;入了個門&#xff0c;不過沒有接觸到本質。大二加入到了學校的網站開發團隊&#xff0c;對網站開發后端進行了學習&#xff0c;對后臺開發也有了基礎的學習吧&#xff0c;哈哈可能以后就是要走…

Javascript面向對象編程:構造函數的繼承

今天要介紹的是&#xff0c;對象之間的"繼承"的五種方法。 比如&#xff0c;現在有一個"動物"對象的構造函數。 function Animal(){ this.species "動物"; } 還有一個"貓"對象的構造函數。 function Cat(name,color){ this.name nam…

并發與多線程

并發 并發&#xff08;concurrency&#xff09;是指CPU在某個時間段內交替處理多任務的能力。每個CPU不可能只顧著執行某個進程&#xff0c;而讓其他進程一直等待被執行。所以&#xff0c;CPU把可執行時間均分成若干份&#xff0c;每個進程執行一份或多份時間后&#xff0c;記錄…

有沒有朋友可以幫我解釋一下貼水是什么意思?

通俗易懂的講&#xff1a;貼水便宜&#xff0c;升水貴 當前&#xff0c;螺紋鋼05合約就是貼水01合約 翻譯&#xff0c;螺紋鋼05合約就是比01合約便宜 升水同理 轉載于:https://www.cnblogs.com/luoluo-123/p/11142229.html

es6常用點記錄

letconst解構賦值字符串數組函數對象SymbolSetWeakSetMapWeakMapProxyreflectProxy與Reflex結合實例classpromiseiteratorGerneratorDecorators模塊學習資料 let /* let 聲明變量 *//* es6相對于es5的全局和局部作用域&#xff0c;多了一個塊作用域&#xff0c;塊作用域里聲明的…

jquery插件封裝指南

入門 編寫一個jQuery插件開始于給jQuery.fn加入??新的功能屬性&#xff0c;此處添加的對象屬性的名稱就是你插件的名稱&#xff1a; jQuery.fn.myPlugin function(){//你自己的插件代碼};用戶非常喜歡的$符號哪里去了&#xff1f; 它仍然存在&#xff0c;但是&#xff0c;為…

synchronize原理

synchronized的三種應用方式 一. 修飾實例方法&#xff0c;作用于當前實例加鎖&#xff0c;進入同步代碼前要獲得當前實例的鎖。 二. 修飾靜態方法&#xff0c;作用于當前類對象加鎖&#xff0c;進入同步代碼前要獲得當前類對象的鎖。 三. 修飾代碼塊&#xff0c;指定加鎖對象&…

不能修改“System Roots”鑰匙串

iOS mac添加證書 不能修改“System Roots”鑰匙串錯誤 如圖&#xff1a; 解決方式&#xff1a; 打開鑰匙串---登錄---&#xff0c;直接把證書拖過來 然后&#xff0c;查看--我的證書&#xff0c;里面&#xff0c;找到證書&#xff0c;即可

stylus在vue中的使用

stylus是一個css預處理器&#xff0c;比較流行的css預處理器有sass、less、stylus&#xff0c;它們都一樣&#xff0c;都是css的語法糖&#xff0c;可以使用變量&#xff0c;可以有簡單的邏輯&#xff0c;使css的開發效率更高&#xff0c;更易維護。stylus來自node社區&#xf…

未來產品的設計

Donald A. Norman繼《情感化設計》之后&#xff0c;又一設計精品力作&#xff1a; 未來產品的設計樣章試讀及本書預定&#xff1a;http://www.china-pub.com/195642市場價 &#xff1a;&#xffe5;39.00 會員價 &#xff1a; &#xffe5;29.25(75折) 【作  者】(美)Donald…