關於接口請求(application/json)跨域問題

vue-cli 項目,頁面寫完,和後臺調試接口時,之前的傳參都是簡單的字符串形式(據說後臺也是string 來接收參數,我也搞不懂);

例如:

var querystring = require("querystring");

var data = {};

data.a = "4";

data.b = "5";

var  sendData = queryString.stringify(data);

//經過console,發現變成字符串形式-a=4&b=5

頁面post傳參時,只需將sendData 傳給後臺,接口即可調通;

但是後臺將入參改爲json形式後,同時需要傳遞的數據格式也變成多級。例如:

var data = {};

data.a = "4";

data.b = {

c:"2",

d:"3"

}

我同樣嘗試用queryString來解析發現接口報415錯誤,同時querystring 出來它並不能解析第二層的data.b,爲 a=4&b=   ;

入參肯定不對;

1、又使用var sendData = JSON.stringify(data);

將json 變爲字符串形式,入參到是全了,但是請求依然是415;

2、將content-type改爲 application/json.結果只要一修改,post請求就變成了options請求,報403,查閱資料原來是跨域時,conetnt-type是這種類型,屬於瀏覽器複雜請求,會先發送一次options請求,同意後才繼續發送post請求

解決方案:

1、本來想在本地自己建一個node服務,我本地請求自己的node服務,node服務充當中間層,轉發請求到另一個服務端,這樣就不會是跨域問題,但顯然各種搜資料,自己嘗試用express框架搭建了一個node服務,監聽端口號,但也是直接把請求參數和地址接口寫在node中請求親測可以拿到數據,再通過res.sendData()將數據返回。但顯然比較麻煩,沒有達到實現簡單請求轉發的功能,可是自己也沒學過node,時間有限,只能擱置;

2、據說後臺java端配置解決了問題,附上地址;

https://www.waitig.com/spring-boot-cros%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E4%B8%83.html;

所以最後不是前端解決的,我也沒有其他更好辦法,有其他方法還望指教


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章