前端的四次元口袋 前端跨域等問題處理

2021-10-04 20:35:52 字數 1173 閱讀 3570

同源策略:是乙個重要的安全策略,用於限制乙個origin的文件或它載入的指令碼如何能與另乙個源的資源進行互動。(它能夠幫助阻隔惡意文件,減少可能被攻擊的媒介)

同源:就是兩個url的protocal(協議)、port(主機)、host(埠)相同

不同源:就是兩個url中三要素(協議、網域名稱、埠)有乙個不同,即為不同源。

舉個栗子:

其中:http(協議)、www.bilibili.com(網域名稱)、80(埠)

同源url

原因同源

只是資源路徑不一樣而已

不同源http和https的協議不同,所以不同源

不同源預設埠80和8080埠不同,所以不同源

不同源網域名稱(主機)不同,所以不同源

跨域:就是url三要素不同的時候要實現訪問進行的一些操作。

跨域的解決方法有:webpack proxy、nginx反向**、webpack plugin、jsonp、cors(node後端)等

那麼本次我們將介紹其中的三種實現方法:webpack proxy、webpack plugin、cors

(1)webpack proxy

npm install -s webpack webpack-cli
var path = require("path");//新增依賴

var htmlwebpackplugin = require("html-webpack-plugin");

module.exports = ,

plugins: [

new htmlwebpackplugin(),

],};

index.js

console.log("log")
package.json中配置(在此之前你需要安裝webpack-dev-server依賴)

"scripts": ,
進行執行得到:

此時已經實現了簡單的跨域。

未完待續。。。

前端中的跨域問題

如果後台使用了cors則不需要往後看了。如果前端解決跨域,那麼預設情況下,前端介面請求的是http localhost 8080 利用vue.config.js中的devserver配置,在這裡配置proxy 在根目錄中建立vue.config.js檔案 module.exports 如果在乙個專案...

git的四次元口袋 github 碼雲

建立賬戶 git config global user.name 我的姓名 git config global user.email 我的郵箱 檢視賬戶 git config global user.name git config global user.email 郵箱為剛剛配置好的郵箱 ssh ...

spring cloud 前端跨域問題的解決方案

解決方案一 在controller上新增 crossorigin註解 使用方式如下 crossorigin 註解方式 restcontroller public class handlerscancontroller origins public response handler requestbo...