2. 程式人生 > >原生JS實現Ajax跨域請求flask響應內容

原生JS實現Ajax跨域請求flask響應內容

阿新 • • 發佈：2019-01-17

Ajax大法好，網站感覺跟高大上，但由於Js的侷限，跨域Ajax無法實現，這裡，講一下解決辦法，前提是需要能夠自己可以控制flask端的響應。

主要技術：

修改伺服器相應的相應頭，使其可以相應任意域名。and設定響應頭，使其能夠相應POST方法。

實現程式碼：

這裡先放flask程式碼：

from flask import make_response
@app.route('/test',methods=['get','post'])
def Test():
    if request.method=='GET':
        rst = make_response('aaa'
 
)
        rst.headers['Access-Control-Allow-Origin'] = '*' #任意域名
        return rst
    else:
        rst = make_response('bbb')
        rst.headers['Access-Control-Allow-Origin'] = '*'
        rst.headers['Access-Control-Allow-Methods'] = 'POST'  #響應POST
        return rst

html測試程式碼：

<!DOCTYPE html>
 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="ss">test get</span>
<button onclick="getAjax()">click</button>

    <p id="time">test post</p>
    <input type="submit" value
 
="click" onclick="getPostAjax()">


<script>
    function getPostAjax() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=function () {
            if(xmlhttp.readyState=4 && xmlhttp.status ==200 ) {
                document.getElementById("time").innerText = xmlhttp.responseText;
            }
        }

        xmlhttp.open("POST","http://localhost:5000/test",true);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");#這句話可以傳送post資料，沒有此句post的內容無法傳遞
        xmlhttp.send();


    }

    function getAjax() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=function () {
            if(xmlhttp.readyState==4 && xmlhttp.status == 200){
                document.getElementById("ss").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","http://localhost:5000/test",true);
        xmlhttp.send();
    }
</script>
</body>
</html>

無法控制響應頭

對於這種情況，get請求可以使用jquery完成，post，無能為力。目前前後端均我一人編寫，暫不考慮慮此情況。

相關推薦

原生JS實現Ajax跨域請求flask響應內容

Ajax大法好，網站感覺跟高大上，但由於Js的侷限，跨域Ajax無法實現，這裡，講一下解決辦法，前提是需要能夠自己可以控制flask端的響應。 主要技術： 修改伺服器相應的相應頭，使其可以相應任意域名。and設定響應頭，使其能夠相應POST方法。 實現

利用原生js實現ajax跨域請求資料

首先，頁面中不需要引入任何的檔案。 1、前臺html頁面 <script> //定義一個ajax var $ = { ajax:function(option){ var url = option.url; var ca

nginx 實現 ajax 跨域請求

ini syn methods acc -m www eth tran 響應 原文：http://www.nginx.cn/4314.html AJAX從一個域請求另一個域會有跨域的問題。那麽如何在nginx上實現ajax跨域請求呢？要在nginx上啟用跨域

JavaScript：使用原生JS實現Jsonp跨域，呼叫百度搜索介面完成聯想詞功能

Jsonp解釋 Jsonp這個術語聽起來很高大上，其實它的原理非常簡單，就是利用src不受同源策略限制這一點來實現的，很多標籤都有src特性。 你們可以想想為什麼img標籤能將不同源的百度logo拿過來？ <img src="https://www.baidu.com/

（Ext / Js） ajax 跨域請求傳送兩次解決方案

我的專案都是前後端分離，在用ajax請求的時候總是會發送兩次請求，一次OPTIONS（預檢請求），一次正常的POST（OR GET）。通過瀏覽器的開發者除錯工具（network）可以看到options請求不會帶上任何引數，返回null（其實返回值可以在後

ASP.NET MVC 實現 AJAX 跨域請求

ASP.NET MVC 實現AJAX跨域請求的兩種方法 通常傳送AJAX請求都是在本域內完成的，也就是向本域內的某個URL傳送請求，完成部分頁面的重新整理。但有的時候需要向其它域傳送AJAX請求，完成資料的載入，例如Google。     在ASP.NET MVC 框架裡實

NodeJ node.js Jquery Ajax 跨域請求

creat set bubuko 位置 spa access com ces 通過 Jquery + Ajax 跨域請求 說白了就是前臺請求ajax數據(JSON)但是請求的數據不在本地的絕對路徑下，接口數據 是沒有這個安全性的我對外公開的接口數據，只要你找到接口你就可以

WebAPI Ajax 跨域請求解決方法（CORS實現）

custom XML header 就會 情況 取數 -o cross serve 概述 ASP.NET Web API 的好用使用過的都知道，沒有復雜的配置文件，一個簡單的ApiController加上需要的Action就能工作。 但是在使用API的時候總會遇到跨

原生js實現Ajax請求

amp 輸入關鍵字 如果 t對象 避免 用戶輸入 hang 更新 gate 總的來說，Ajax是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個網頁的情況下，異步請求數據並刷新頁面。舉一個小的例子：Goole搜索頁面。當用戶在輸入框輸入關鍵字的時候，JavaScrip

原生js實現ajax非同步請求

function createXMLHttpRequest() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e)

Jquery Ajax實現CORE跨域請求

在我們使用ajax請求，如果是跨域的話會報以下瀏覽器錯，你應該對下面出現在瀏覽器控制檯裡的錯誤很熟悉。如果你沒見過，那隻能說明你還年輕 Failed to load https://example.com/: No ‘Access-Control-Allow-O

ajax跨域請求簡單實現Java後臺

因為官網有一個合作加盟的功能，需要一個表單錄入，但是官網除了這個功能，都是靜態頁面，所以就準備寫一個ajax跨域，儲存到之前公司專案的後臺管理系統去，第一次用ajax跨域，網上很多參考。這也是我的第一篇博文，準備以後養成這個習慣，以備後期參考。。。。。 通過自己N久找程式碼

利用JQuery實現更簡單的Ajax跨域請求

<html><head><title>JQuery學習</title><script src="jquery-1.2.6.min.js" type="text/javascript"></script><script type="t

js ajax跨域請求

1 協議+域名+埠相同，就不算跨域，否則跨域  http://192.168.168.1:80/aaa  http://192.168.168.1:80/bbb  http://192.168.168.1/ccc  //預設埠是80 以上都不是

原生js實現ajax請求（帶請求頭header）和資料傳參過程程式碼

一、Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的簡寫 Ajax是一門技術，並不是一門語言 使用XHTML+CSS來標準化呈現 使用XML和XSLT進行資料交換及相關操作 使用XMLHttpReques

JSONP實現Ajax跨域

images cnblogs log 方式 clas 一個 nbsp submit har 同源策略，它是由Netscape提出的一個著名的安全策略。 現在所有支持JavaScript 的瀏覽器都會使用這個策略。 所謂同源是指，域名，協議，端口相同。 當一個瀏覽器的兩個ta

AJAX 跨域請求 - JSONP獲取JSON數據

tel -name 跨域訪問 服務器 utf pen domain nbsp XML 1、什麽是JSONP？ 　　JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callb

AJAX跨域請求數據

一個 回來 函數 請求 我們 才會 但是 註意點 攔截 由於瀏覽器的同源策略 ajax請求不可以接收到請求響應回來的數據 　　請求數據需要調用瀏覽器的內置構造函數 XMLHttpRequest() 進行 實例對象 　　var xhr = new XMLHttpRequ

Ajax跨域請求COOKIE無法帶上的解決辦法

tar function jquery question logs request cross xmlhttp quest 本文參考https://stackoverflow.com/questions/12840410/how-to-get-a-cookie-from-a

實現AJAX跨域訪問方式一

nbsp any logs type pin web ted class pattern 1.添加pom依賴 <dependency> <groupId>com.thetransactioncompany</groupId>