1. 程式人生 > >前後端資料互動 ---- 跨域請求

前後端資料互動 ---- 跨域請求

跨域請求

nodejs後臺配置的兩種方案(響應時)
1. res.setHeader(‘Access-Control-Allow-Origin’, req.headers.origin); 允許跨越
2. cors 中介軟體 (如果後端配置了中介軟體,前端不需要設定請求頭)
需求:伺服器跨域給前端寫cookie

//cors中介軟體
var cors = require('cors');

app.use(cors({
    "origin": "*",
    "methods": "GET,HEAD,PUT,PATCH,POST,DELETE"
, "preflightContinue": false, "optionsSuccessStatus": 204 }));

跨源憑據:
ajax跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)

前端:設定ajax的請求帶憑據

withCredentials=true

後端:接受後http必須做出對應的響應:

Access-Control-Allow-Credentials: true
nodejs:
router.get('/cookies', function(req, res){
    res.setHeader('Access-Control-Allow-Origin'
, req.headers.origin); //允許跨越 res.setHeader('Access-Control-Allow-Origin', '*'); //允許所有跨越 res.setHeader('Access-Control-Allow-Credentials', true);//告訴客戶端可以在HTTP請求中帶上Cookie(憑證資料),客戶端可以不帶 }

前端原生:請求頭裡面帶憑證,帶cookie

var xhr = new XMLHttpRequest();
xhr.open("post", "xxx/xxx", true);
xhr.withCredentials = true
; //放在 open 方法後面比較靠譜 xhr.onload = function(){} xhr.send("a=1&b=2");

前端jqAjax: 請求頭裡面帶憑證,帶cookie

$.ajax({
    type:'get',
    url:"http://localhost:3000/logouts",
    dataType:"json",
    xhrFields: {
       withCredentials: true
    },
   success:function(data){
       console.log(data);
   }
})

前端:axios 請求頭裡面帶憑證,帶cookie

axios.defaults.withCredentials=true

前端:fetch 請求頭裡面帶憑證,帶cookie

fetch('http:localhost:3000/cookies', {
    credentials: 'include', //憑證
    method:'get',
    headers:{
       'Accept':'application/json,text/plain,*/*',
       'Content-type':'application/x-www-form-urlencoded;charset=utf-8'
   },
   body:數    據
}).then(function(res) {
        // ...
})

相關推薦

前後資料互動 ---- 請求

跨域請求 nodejs後臺配置的兩種方案(響應時) 1. res.setHeader(‘Access-Control-Allow-Origin’, req.headers.origin); 允許跨越 2. cors 中介軟體

前後分離開發,訪問的apche設置

itl www. 配置 Coding httpd服務 註意 modules enc require 1,如何讓Apache支持跨域訪問呢? 步驟: 修改httpd.conf,windows中對應的目錄是:C:\wamp\bin\apache\Apache2.4.4\con

Yii + Vue 前後交互()

啟動服務 log ont 9.png resp .get 按鈕 成功 source 如有疑問,請在微博 韓峰26 留言! 前端配置什麽指明發送到具體的URL   需要使用vue-resource:   下載:         cd 項目根目錄

前後資料互動,axios和jquery ajax的區別

axios作為Vue生態系統中濃墨重彩的一筆,我學習這個東西也是花了一定的時間的。剛開始的時候,也是遇到了很多問題。 逐漸摸透了它的脾氣。 首先說說FormData和Payload兩種資料格式的區別: 先是提交一個FormData的請求試試看: 然後我們看後端: 然後

python原生程式碼(無框架,無AJAX技術)前後資料互動

採用form表格的post請求向後端傳遞資料 本系列即儘量採用原生程式碼方式實現瀏覽器與web伺服器之間進行互動;幫助小白們理解web伺服器的工作原理。 採用form表格從前端瀏覽器向後端提交資料是一種最原始的前端傳遞資料的方式,雖然程式碼執行較為麻煩,但是卻有助於深刻理解前後端的互動原

Nginx+Springboot+Vue 前後分離 解決問題

1:前端vue 寫完 打包 npm run build prod   2: 後端api 寫完打包 springboot mvn package -Dmaven.test.skip=true   3: nginx配置反向代理,解決跨域問題 配置如下  server

關於dva前後分離的問題

最近準備自己搭建一個雲盤,因為專案準備是採用前後端分離來寫,所以會遇到跨域的問題。 dva自己封裝的request可以加一個引數   但是實際上還是存在著跨域的問題。 於是在網上搜索一番之後發現可以在 package.json裡面加一個 "proxy": "http://localho

vue+Springboot 前後資料互動(1)

最近使用 vue 的 axios 往後端傳送資料,結果一直報錯,嘗試了多種方法 如果vue專案沒有打包放在 springboot 專案下的話,需要開啟跨域支援 在 vue 專案裡 config 目錄下的 index.js 檔案,找到 proxyTable   加上 '

ssm ajax 前後資料互動 (包括出現的406錯誤)

廢話 我哥從我大一的時候,就告訴我要寫部落格,我感覺好對不起他,現在大三了,才開始寫第一篇。。。 剛把ssm教程看完,然後就想用ajax實現前後端分離。於是乎,我搞了兩天才成功。。。 一、搭建環境 首先是ssm的一堆配置檔案,我很迷。。 都是從視訊裡扒下來的,對裡面的東西還不太瞭

Vue+Koa2移動電商實戰 (十一)前後通訊和處理

今天學習的是前後端的通訊和後端跨域的處理 首先安裝koa-bodyparser中介軟體到我們專案中來,以便我們後端接收前端傳送過來的請求 npm install --save koa-bodyparser 安裝完成後在service/index.js中引入 const bodyPars

利用Apache反向代理解決前後造成的問題

Apache可以被配置為正向(forward)和反向(reverse)代理。 正向代理是一個位於客戶端和原始伺服器(origin server)之間的伺服器,為了從原始伺服器取得內容,客戶端向代理髮送一個請求並指定目標(原始伺服器),然後代理向原始伺服器轉交請求並將獲得的內容返回給客戶端。客戶端

表單+node(實現前後資料互動

('',(req,res) => { // req.query是讀取前臺的表單中的所有資料 var name = req.query.name; // 獲取name var pass = req.query.password // 獲取pass var i = 0

前後資料互動方法和原理

       對於想要搞web的新手而言,會用html+css+javascript實現一個頁面沒什麼太大的困難,但是想要前後端實現資料互動,在沒有指導的情況下,可能大多數人都會一頭霧水,往往都會有以下的疑問。 目錄 網站資料處理主要分為三層。 第一層,表

SpringBoot 實現前後分離的訪問(Nginx)

序言:使用Nginx反向代理,可以解決跨域無權和Session丟失的問題,十分方便。下面我們以前後端分離為案例,展開Nginx的使用教程。 一. 配置和啟動Nginx 下載地址 注意事項:下載之後,記得解壓到全英文路徑,避免中文路徑導致Nginx啟動失敗。 修改配

java伺服器配置支援請求

前言:之前做好的登陸介面,剛剛拿去給前端呼叫。發現前端那邊報錯,無法調到介面。因為我們後端的介面是在一臺伺服器上,前端(使用的是nodejs)的程式碼在另一臺伺服器上,導致兩臺伺服器之間無法相互呼叫(伺服器我們使用的是tomcat 7)。所以為了解決這個問題,前端那邊在介面

SSH框架前後資料互動

一、屬性驅動 1.action中無實體類的屬性驅動 無實體類的屬性驅動,即前端頁面傳送到action中的資料不是action中實體類的某個屬性,而是單獨的,普通的變數。例如jsp頁面要將一個username傳送到action中: jsp頁面: <form action="tes

Python Django 前後資料互動 之 後向前端傳送資料 Django 前後臺的資料傳遞

Django 前後臺的資料傳遞 嚴正宣告: 作者: psklf 出處: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html 歡迎轉載,但未經作者同意,必須保留此段宣告;必須在文章中給出原文連線;否則必究法律責任!

Python Django 前後資料互動 之 HTTP協議下GET與POST的區別 99%的人都理解錯了HTTP中GET與POST的區別(轉自知乎)

99%的人都理解錯了HTTP中GET與POST的區別(轉自知乎)   作者:Larry 連結:https://zhuanlan.zhihu.com/p/22536382 來源:知乎 著作權歸作者所有。商業轉載請聯絡作者獲得授

Python Django 前後資料互動 之 HttpResponse、render、redirect

在使用三神裝的時候,首先當然是得要匯入它們: from django.shortcuts import HttpResponse, render, redirect 1、HttpResponse 它是作用是內部傳入一個字串引數,然後發給瀏覽器。 例如: def index

學習網站專案學習 - 基於Django 和 Vue的前後資料互動

目錄 一、前後端互動實現思路 1-1 前端思路 1-2 後端思路 二、前端設計 2-1 預設資料設定 2-1-1 建立檢視元件 DataTest.vue 2-1-2 router.js 路由配置 2-1-3 App.vue配置 2-2 使用axios獲取資料