前端怎么解決跨域問(wèn)題

nginx 和 vue都可以配置的

前端當(dāng)然是和后端一起解決跨域，ajax跨域的話，大部分后端搞一下就完事了，前端幾乎不需要做啥。

開(kāi)發(fā)階段

vue cli 代理配置

config/index.js

    proxyTable: {
      '/api': {
        target: 'http://11.17.0.18:9999',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

上線后

讓運(yùn)維配置 nginx rewrite 就行了

還有么

讓后端開(kāi)發(fā)在頁(yè)面 response.header 里加 允許跨域

甩鍋給后臺(tái)，實(shí)在不行jsonp、window.name或者通過(guò)修改document.domain來(lái)跨子域，還有就是使用HTML5中新引進(jìn)的window.postMessage方法來(lái)跨域傳送數(shù)據(jù)

稍微總結(jié)了下?？梢詤⒖枷拢?a >https://segmentfault.com/a/11...

這個(gè)問(wèn)題還真的是歷久彌新啊。

怎么說(shuō)呢，我只能說(shuō)我對(duì)于跨域問(wèn)題有一定的了解，并且知道常規(guī)的兩種解決方案。

1. jsonp

其大概原理是利用script/img/link等標(biāo)簽可以跨域取回文件的性質(zhì)，來(lái)實(shí)現(xiàn)跨域的。

1. cors

這個(gè)是瀏覽器和服務(wù)器端共同合作去進(jìn)行跨域的，瀏覽器端相關(guān)的接口有 fetch/xhr，并且這兩者實(shí)現(xiàn) cors 的跨

域流程應(yīng)該還不一樣，很蛋疼。

總之，跨域是一個(gè)很復(fù)雜的問(wèn)題。

我補(bǔ)充一點(diǎn)，題主有興趣可以去看一下，歡迎探討。

1. 為什么說(shuō) fetch/xhr 的流程不一樣。

題主可以試試分別使用 fetch/xhr 跨域請(qǐng)求一個(gè)接口,這個(gè)接口要求附帶 cookie,并且接口為非簡(jiǎn)單請(qǐng)求

這種一般回答兩點(diǎn)就可以了：
1.jsonp
2.CORS
這兩個(gè)重點(diǎn)了解一下
其他方式還有postMessage、websocket、hash等等

都讓開(kāi),讓我來(lái)
題主這個(gè)問(wèn)題其實(shí)比較廣

一. 如果是開(kāi)發(fā)環(huán)境需要連其它環(huán)境的API, 確保線上不存在問(wèn)題的話,可以強(qiáng)制破開(kāi)跨域問(wèn)題
右擊google瀏覽器 - 找到目標(biāo)- 添加 --args --disable-web-security --user-data-dir

二. 樓主用的vue-cli, 處理接口的方式不需要寫死域名 比如你要請(qǐng)求的是/user/login.json 直接這樣寫可以,然后在webpack上配置代理

devServer: {
    proxy: {
        '*': {
            target: 'xxxx', // 這里寫要代理的ip
            secure: false,
            changeOrigin: true
        }
    }
}

三. 上線和開(kāi)發(fā)還是存在跨域問(wèn)題 那么直接通過(guò)jsonp去處理 原理其實(shí)很簡(jiǎn)單 就是通過(guò)<script>標(biāo)簽去加載接口 通過(guò)callback的方法接收回調(diào)

四 還有其它辦法就不多說(shuō) 百度就有 不常用就不說(shuō)了