2. 程式人生 > >跨域請求:Fetch實現跨域請求與POST方式引數提交

跨域請求:Fetch實現跨域請求與POST方式引數提交

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

一、要實現跨域，首先需要理解什麼叫做跨域。

跨域是指，不同域名之間相互訪問。
例如 ：我的電腦上有2個伺服器 192.168.0.11  192.168.0.12  
如果第一個伺服器上的頁面要訪問第二個伺服器，就叫做跨域  
或者http://www.baidu.com 要訪問http://www.xxx.com ，也是不同域名，也是跨域  
明白什麼叫做跨域之後就可以想怎麼解決這個問題了。要實現跨域就需要明白跨域資源共享協議：CORS。
要詳細瞭解CORS，請參照一下部落格地址，這裡就不再贅述。

參考部落格：

跨域資源共享 CORS 詳解（http://www.ruanyifeng.com/blog/2016/04/cors.html）

二、解決跨域

CORS需要瀏覽器和伺服器同時支援。目前，所有瀏覽器都支援該功能，IE瀏覽器不能低於IE10。

整個CORS通訊過程，都是瀏覽器自動完成，不需要使用者參與。對於開發者來說，CORS通訊與同源的AJAX通訊沒有差別，程式碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動新增一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。

因此，實現CORS通訊的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通訊。

以下以SPRING+React+ Fetch進行示例。

上面也說了，CORS需要瀏覽器和伺服器同時支援，那麼伺服器如何支援跨域呢。

如果伺服器是apache

(1)修改http服務的配置檔案:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf

把LoadModule headers_module modules/mod_headers.so前面的註釋刪除.

(2)新增Header set Access-Control-Allow-Origin *

<Directory />

    AllowOverride none

    Require all granted

         Header set Access-Control-Allow-Origin *

</Directory>

(3)重啟http服務

如果是tomcat,比如spring MVC專案

首先要建立一個Filter攔截器進行攔截
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

public class CorsFilter implements Filter{

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "token,Access-Control-Allow-Origin,Access-Control-Allow-   Methods,Access-Control-Max-Age,authorization");
        chain.doFilter(req, res);
        
    }

    @Override
    public void destroy() {
    }

}

關鍵程式碼:response.setHeader("Access-Control-Allow-Origin", "*");

修改web.xml,增加:

<filter>  
      <filter-name>corsFilter</filter-name>  
      <filter-class>=**.**.CorsFilter</filter-class>  
    </filter>  
    <filter-mapping>  
      <filter-name>corsFilter</filter-name>  
      <url-pattern>*.json</url-pattern>  
    </filter-mapping>

**.**需要用自己的類路徑代替

上面伺服器支援跨域了，下面開始前端頁面進行跨域請求

import xFetch from './xFetch';

export default class UserService {
  constructor(options) {
  }


  getUserList(callback) {
    let formData = new FormData();
    formData.append("groupId", 1);

    var init = {
        method: 'POST',
        mode:'cors',
        cache: 'default',
        headers: {
          'Accept': 'application/x-www-form-urlencoded',
          'Access-Control-Allow-Origin':'*',
          'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
          'token': '**********'
        },
        body:formData
      };
    xFetch('http://127.0.0.1:8080/**/**/**.json',init
    ).then(
      ({jsonResult}) => {
        /*
        jsonResult.map(item => {
          alert(item.title);
        })*/
        callback(jsonResult, {});
      }
    );
  }

  getUserHoldRoleList(callback) {
    xFetch('/userHoldRoleList').then(
      ({jsonResult}) => {
        /*
        jsonResult.map(item => {
          alert(item.title);
        })*/
        callback(jsonResult, {});
      }
    );
  }
}

注意：以上伺服器端Filter設定裡面
       response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "token,Access-Control-Allow-Origin,Access-Control-Allow-      Methods,Access-Control-Max-Age,authorization");

與前端頁面請求中

let formData = new FormData();
    formData.append("groupId", 1);

    var init = {
        method: 'POST',
        mode:'cors',
        cache: 'default',
        headers: {
          'Accept': 'application/x-www-form-urlencoded',
          'Access-Control-Allow-Origin':'*',
          'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
          'token': 'Cl5bxjcUt+gDtIDJY4wDgZKNoYdMcgjKQQKXga/UKtmpfniucZTeKaf5mUjsm7uc'
        },
        body:formData
      };

的header要保持一致。

其中method 表示請求的方法。而允許哪些方法呢，在headers中是有設定的，伺服器端和前端都有設定，而且需要相同

'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',

response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");

表示前端要在header中傳遞的引數和使用的引數

   response.setHeader("Access-Control-Allow-Headers", "token,Access-Control-Allow-Origin,Access-Control-Allow-   Methods,Access-Control-Max-Age,authorization");

mode 方式指定了使用的協議，這裡寫了使用 cors協議。mode 請求的方式 cors, no-cors, or same-origin

cache 快取 default, no-store, reload, no-cache, force-cache, or only-if-cached

headers 這個引數需要用到 Headers 物件。

'Access-Control-Allow-Origin':'*'  也是在伺服器端和前端中都有設定。 這個代表的意思是 允許訪問的域名。*  表示允許跨所有，為了安全起見，可以設定為固定的域名。 這樣 伺服器端與客戶端就進行了雙向的域名繫結。

REACT 使用POST方式進行提交

我們在請求http介面時候，通常都會使用get和post的方式，針對表單提交這類的請求，我們通常採用post方式。

那麼在RN中的Fetch API中post提交有哪些坑呢？讓我們擼起來。


我們先來說說Server端的程式碼，通常我們從Request獲取引數時的方法為：

  1. String paraValue = request.getParameter(paraName);  
我們下面說的判斷能不能獲取引數，就是按照這種方法來獲取。

在 RN中，通常我們會怎麼寫程式碼呢？
方案一（不推薦）：
[javascript] view plain copy
  1. let url = "http://127.0.0.1:8080/api/testFetch”
  2. let params = "name=admin&password=admin123”;  
  3. fetch(url , {  
  4.   method: 'POST',  
  5.   headers: {},  
  6.   body: params,  
  7. }).then((response) => {  
  8.   if (response.ok) {  
  9.       return response.json();  
  10.   }  
  11. }).then((json) => {  
  12.   alert(JSON.stringify(json));  
  13. }).catch((error) => {  
  14.   console.error(error);  
  15. });  

此時我們發現在Server端無法獲取到name和password的值。
換成GET試試，將params追加到url後，發現ok。那這是什麼情況呢？下面講解。

好，不行，我們就再換一種方法試試唄。
方案二（不推薦）：
[javascript] view plain copy在CODE上檢視程式碼片派生到我的程式碼片
  1. let params = {"name":"admin","password":"admin123"};  
  2. fetch(url , {  
  3.   method: 'POST',  
  4.   headers: {},  
  5.   body:JSON.stringify(params),  
  6. }).then((response) => {  
  7.   if (response.ok) {  
  8.       return response.json();  
  9.   }  
  10. }).then((json) => {  
  11.   alert(JSON.stringify(json));  
  12. }).catch((error) => {  
  13.   console.error(error);  
  14. });  
我們直接將params封裝成一個JSON物件，然後在body裡將JSON物件轉成字串傳過去，發現然並卵，Server端還是獲取不到值。


好，我們不兜圈子了，直接說明原因。
其實，方案一和方案二都是直接在body裡傳遞了一個字串，在Server端獲取body的方式如下：
  1. StringBuilder buffer = new StringBuilder();  
  2. BufferedReader reader = beat.getRequest().getReader();  
  3. String line;  
  4.  while ((line = reader.readLine()) != null) {  
  5.     buffer.append(line);  
  6.  }  
  7. String body = buffer.toString();  
通過這種方法我們可以獲取到傳入的字串。
既然能獲取到字串，那麼我們也可以拿到我們傳入的值了，可以轉JSON、或者按&切割字串，只不過這種解決方案好像有點挫啊！！！

也許你會問在jquery中，我們就是按照方案一這種方式做的啊，怎麼好使呢？
答：因為引數 "name=admin&password=admin123” 在jquery中，傳入物件框架會自動封裝成formData的形式，fetch沒有這個功能。

終極方案（推薦使用）：

既然fetch不會自動轉FormData，那我們自己new一個FormData，直接傳給body。
在FormData中也可以傳遞位元組流實現上傳圖片的功能。參考：http://blog.csdn.net/codetomylaw/article/details/52446786
[javascript] view plain copy在CODE上檢視程式碼片派生到我的程式碼片
  1. let formData = new FormData();  
  2. formData.append("name","admin");  
  3. formData.append("password","admin123");  
  4. etch(url , {  
  5.  method: 'POST',  
  6.  headers: {},  
  7.  body: formData,  
  8. ).then((response) => {  
  9.  if (response.ok) {  
  10.      return response.json();  
  11.  }  
  12. ).then((json) => {  
  13.  alert(JSON.stringify(json));  
  14. ).catch((error) => {  
  15.  console.error(error);  
  16. );  
這樣我們就可以在Server端獲取到name和password的值了。

參考部落格：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://www.giuem.com/html5-fetch-api/

http://www.cnblogs.com/snandy/p/5076512.html

http://blog.csdn.net/u012620506/article/details/52346264

http://blog.csdn.net/codetomylaw/article/details/52588493




相關推薦

跨域請求:Fetch實現跨域請求與POST方式引數提交

一、要實現跨域，首先需要理解什麼叫做跨域。 跨域是指，不同域名之間相互訪問。 例如 ：我的電腦上有2個伺服器 192.168.0.11 192.168.0.12 如果第一個伺服器上的頁面要訪問第二個伺服器，就叫做跨域 或者http://www.baidu.com

跨域請求 fetch 實現

1.CORS 的分類 分為兩大類：簡單的請求；帶有preflight預請求的CORS。兩類請求的區分標準如下： 簡單請求 某些請求不會觸發 CORS 預檢請求。本文稱這樣的請求為“簡單請求”。若請求滿足所有下述條件，則該請求可視為“簡單請求”：

什麽是跨域？如何實現跨域？

res methods class 方式 資源 lan lba png 指向 跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制。 使用ajax請求訪問其他服務器的數據,此時,客戶端會出現跨域問題. localhost和127.0

有限域(4)——程序實現有限域的運算

https 函數式編程 還需 true targe 得到 現在 應該 logs 　　版權申明：本文為博主窗戶(Colin Cai)原創，歡迎轉帖。如要轉貼，必須註明原文網址 　　http://www.cnblogs.com/Colin-Cai/p/9652019.

Retrofit(預備篇)、Retrofit+OkHttp實現簡單的Get與Post請求

在上面兩講中學習了OkHttp的使用，OkHttp還是很強大的。而本人更喜歡Retrofit+OkHttp結合來實現網路請求，Retrofit使用註解，更加清晰與明瞭。下面用Retrofit實現簡單的Get與Post請求。一、伺服器端新建OkHttpServer伺服器專案，T

使用 Promise 實現任務佇列傳送請求，實現最大請求數目限制

核心 設定最大請求數量，當前請求數量，待執行佇列 呼叫時，建立一個新任務，然後判斷是否達到最大請求數量，若達到則將任務追加到待執行佇列，否則，則直接執行該任務。並返回Promise 建立任務時，需要返回一個函式，當該任務開始執行則當前數量加一。當任務執行完畢時使用finally，當前數量減一，並從待執行佇列

HTTP 請求的 GET 與 POST 方式的區別

瀏覽器 tro 名稱 安全 data 回文 部分 strong 長度 HTTP 請求的 GET 與 POST 方式的區別 在客戶機和服務器之間進行請求-響應時，兩種最常被用到的方法是：GET 和 POST。 GET - 從指定的資源請求數據。 POST - 向指定的資源提

HttpClient請求服務端介面資料Get與Post請求

public static void main(String[] args) { //String url = "http://10.3.1.32/proxy_services/MDMConsumerProxyService"; String url = "http

HTTP請求的GET與POST 方式的區別

Http 定義了與伺服器互動的不同方法，最基本的方法有 4 種，分別是 GET，POST，PUT，DELETE。 URL 全稱是資源描述符，我們可以這樣認為：一個 URL 地址，它用於描述一個網路上的資源，而 HTTP 中的 GET，POST，PUT，DELETE 就對應著

RESTful風格的請求方式, 放到body裡面請求(避免介面雖用的是post方式接收, 實則跟在url後面)

     雖然也用了很時間RESTful風格來開發，但最近發現自己犯了個錯誤（貌似我們公司好多人都在正在犯這個錯誤）， 就是雖然我的後臺介面用的是post來接收，前端也是按照post方式來發送, 執行後實際上所有引數是跟在url後面, 這是很明顯的get方式才會的,  pos

基於AndroidStudio開發Android實現簡單的註冊登入 POST方式提交資料

登入佈局頁面 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns

利用jsonp實現跨域請求

get p地址 doc ajax請求 -s tar 原理 安全策略 都是 　　同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百

ajax獲取json數據及實現跨域請求

cgi size 域名 3.2 方便 nap 不清楚 anti dex 最近想練習一下ajax獲取json數據 , 首先上網找一些在線的可用來測試的接口. -----------------------------------------------------這裏是接口分

[轉] 利用CORS實現跨域請求

src 流程圖 exp 否則 expose 前端 eof 目前 star [From] http://newhtml.net/using-cors/ 跨域請求一直是網頁編程中的一個難題，在過去，絕大多數人都傾向於使用JSONP來解決這一問題。不過現在，我們可以考慮一下

在ABP的Web層中實現復雜請求跨域訪問

ces 跨域 clas 實現 control api markdown access 處理 在最近的項目中，後端使用ABP，前端采用React，前後端完全分離。其中大部分接口都通過WebApi層調用，項目中未使用Session。但最後在做一個留言的驗證碼時，使用了Sess

vue-cli項目本地代理實現跨域請求

con 跨域 請求 AR url 本地 dex ams gin 　　使用 Vue-cli 創建的項目，開發地址是 localhost:8080，需要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不同域名之間的訪問，需要跨域才能正確請求。跨

八種方式實現跨域請求

防範 erro create ati brush col html5新特性 ole als 瀏覽器的同源策略 ? 提到跨域不能不先說一下”同源策略”。 ? 何為同源？只有當協議、端口、和域名都相同的頁面，則兩個頁面具有相同的源。只要網站的 協議名protocol、 主

WebAPI實現跨域請求

一、跨域問題的由來     目前專案實現前後端分離，所以就會那麼此時前端和後端分別在不同的伺服器上，此時就會涉及到跨域問題。再具體說明一下。 1.前後端未分離：原來我們的積分系統採用MVC框架，整個系統的前端以及後端邏輯都在一個解決方案中，此時我們稱之為前後端沒有分離。

全棧07 Express轉發前端請求實現跨域

http模組和https模組 使用了express的http模組實現了對前端http請求的簡單轉發，從而實現了跨域請求 const express = require('express'); const http = require('http'); const router

axios實現跨域請求

在使用vue.js進行開發，我們會遇到跨域請求的情況，這裡記錄下自己所遇到的情況。 使用的是目前主流的axios進行請求，首先開啟config資料夾下的index檔案，在proxyTable裡面新增程式碼 proxyTable: { '/api': { t