vue基礎,同源策略以及跨域
阿新 • • 發佈:2020-08-18
跨域基礎
跨域: 1、是什麼 你的目標和你自己現在的位置一樣還是不一樣 瀏覽器上的同源策略 特點: 1、跨域只存在於瀏覽器 2、不在瀏覽器發請求是不會存在跨域問題的 3、http請求分為兩大類: 普通http請求(如百度請求)和ajax請求(跨域是出現在ajax請求) 2、在什麼地方 瀏覽器會跨域 伺服器不會 3、什麼條件會跨域 同源(協議 ip 埠一致)不跨域 不同源就跨域(三個中間有一個不一樣就跨域) http://localhost:8080/ ------- 》 github (有得是後臺解決了允許跨域,前端如何解決跨域) 4、解決跨域:前端可以解決、後端解決。一般後端解決比前端解決容易
1.如果埠9000的服務向埠8000的埠傳送請求,這一定跨域了,此時我們需要在在webpack配置檔案中devserer中配置Proxy代理
async searchAjax(q) { try { const result = await axios({ url: "http://localhost:9000/api/users/info", method: "get" }); console.log(result.data); } catch (error) { console.log(error); }
在webpack配置檔案中devserer中配置Proxy代理
//3. 增加 devServer 配置
devServer: {
open: true, // 自動開啟瀏覽器
compress: true, // 啟動gzip壓縮
port: 9000, // 埠號
quiet:true,
// proxy:{
// // 請求路徑 http://localhost:9000/api/users/info
// //api會把http://localhost:9000覆蓋掉
// // 代理轉發路徑 http://localhost:8000/api/users/info
// // "/api":{
// // target :"http://localhost:8000", //目標路徑
// // pathRewrite: {"^/api" : ""}, //代理會把身份標識去掉替換成空竄
// // changeOrigin:true
// // },
// }
},