1、什么是跨域？

2、如何解決？

跨域是前端所獨有的，后端不存在跨域問題。是瀏覽器的一種安全保護手段，為了防止別人抓取、篡改你的網站數據信息。遵循同源策略、同協議（http）、同域名、同端口，少一項不同就會出現跨域問題。

跨域問題造成的報錯

2-1、CORS跨域：服務端設置，前端直接調用。

后臺設置允許某站點訪問，就能訪問。（如：easy-mock設置的任何人都可以訪問，最近網站好像崩了）

let url=‘’ axios.get(url）.then( ()=>{ } )

設置為true，跨域時將前端cookie帶過去

2-2、jsonp跨域: 前端適配，后端配合。前后端同時改造

前端安裝jsonp插件，在使用jsonp時會發送一個callback過去，后端往callback內寫一些數據。Jsonp不是真正的XHR請求，是js（腳本）請求

let url=‘’ jsonp(url,(err,res)=>{ let result = res this.data = result })

2-3、跨域--接口代理（如：訪問的/a接口實際代理到/b接口了）

修改服務器配置。通過修改nginx服務器配置來實現，前端修改，后端不動。

在vue.config.js內設置端口號，（代理）proxy

proxy: {
[process.env.VUE_APP_BASE_API]: {target: `http://localhost:${port}/mock`,changeOrigin: true,pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},'/api': {target: 'http://127.0.0.1:8000',changeOrigin: true
}
},

當內部請求遇到/api時，就會偷偷換成http://127.0.0.1:8000這個里面的接口，但是去訪問的時候還是localhost:8080,

總結

以上是生活随笔為你收集整理的axios代理跨域 cli4_跨域本质及解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。