前後端分離如何解決跨域問題

2021-10-09 08:41:28 字數 1396 閱讀 1656

現在前後端分離開發很常見了,由於瀏覽器的同源策略,存在跨域問題

f12 報錯:

no 'access-control-allow-origin' header is present on the requested resource

服務端你會發現 request.method是options,而且會請求2次,第一次是嘗試

解決跨域方案有好幾種,這裡介紹反向**解決方案,盡量對**不修改

前端**:

build: ,
反向**用

1. webpack dev-serve

devserver: 

}},

注意上面是請求到 localhost:8082/api/* 下,如果不要api,加 pathrewrite:

原理:瀏覽器訪問 localhost:8080/login,輸入賬戶後登陸(/user/login),

此時url變成訪問 http://localhost:8080/api/user/login,dev-server proxy後,

跳轉 http://localhost:8082

/api/user/login訪問後台

這樣前端localhost:8080和 後端localhost:8082 實現跨域訪問了。

反向**,也可以選擇用

2. nginx

前端**

build: ,

devserver: ,

nginx.conf

server

location /

}

原理:瀏覽器訪問 localhost:8030/login 打到了nginx,跳轉到了http://localhost:8080/login,輸入賬戶後登陸(/user/login),

此時url變成訪問 http://localhost:8030/api/user/login,nginx proxy後,

跳轉 http://localhost:8082

/api/user/login訪問後台

這樣前端localhost:8080和 後端localhost:8082 實現跨域訪問了。

前後端分離專案,如何解決跨域問題?

前後端分離專案跨域問題是不可避免的。通常情況下前端由react vue等框架編寫,通過ajax請求服務端api,傳輸資料用json格式。那麼為什麼有跨域的問題呢?解決跨域問題有哪些方式?搞清楚這兩個問題我們需要了解一下什麼是同源策略。同源策略 same origin policy 是一種安全約定,是...

允許跨域訪問 前後端分離專案,如何解決跨域問題

跨域資源共享 cors 是前後端分離專案很常見的問題,本文主要介紹當springboot應用整合springsecurity以後如何解決該問題。cors全稱cross origin resource sharing,意為跨域資源共享。當乙個資源去訪問另乙個不同網域名稱或者同網域名稱不同埠的資源時,就...

前後端分離跨域問題

access to xmlhttprequest at localhost 8081 user gettoken?username hyly password hyly from origin http localhost 63342 has been blocked by cors policy ...