鍍金池/ 問答/PHP  HTML/ 前后端分離WEB項(xiàng)目本地開發(fā)的跨域問題

前后端分離WEB項(xiàng)目本地開發(fā)的跨域問題

開發(fā)環(huán)境： MAC OS， APACHE, PHP7.2, ThinkPHP5, vue.js 3.0, axios。

后端接口是由ThinkPHP5開發(fā)，返回?cái)?shù)據(jù)的時(shí)候已經(jīng)加上了跨域的消息頭。部署在本地IP：192.168.0.3:80。
通過POSTMAN可以訪問到接口返回的數(shù)據(jù)。

clipboard.png

clipboard.png

剛剛修改了想服務(wù)器返回的HEADER，錯(cuò)誤依舊。
clipboard.png

前端頁面用的是通過vue-cli構(gòu)建的項(xiàng)目，運(yùn)行在192.168.0.3:8080?，F(xiàn)在想在前端調(diào)用后端的接口，但是一直提示如下錯(cuò)誤信息：

clipboard.png

請(qǐng)問這種情況應(yīng)該如何設(shè)置跨域？沒有經(jīng)驗(yàn)，昨天折騰了一晚上弄到今早5點(diǎn)都沒弄好。。著急，請(qǐng)各位有經(jīng)驗(yàn)的朋友多多指教，謝謝！

回答
編輯回答
遲月

vue-cli里有代理設(shè)置。
但是?。?！怕麻煩的話，啥都別說了。不如試試這個(gè)，一勞永逸。
可能是東半球解決跨域問題最簡(jiǎn)單粗暴的方法：
1.chrome復(fù)制快捷方式。
2.右鍵快捷方式，屬性----目標(biāo)
改為以下（確保這些安裝路徑都是存在的）

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Program Files (x86)\Google\Chrome\Application

3.優(yōu)勢(shì)：甚至可以本地頁面調(diào)試線上接口。。。

2017年10月21日 12:14
編輯回答
不二心

你已經(jīng)用了cli怎么不用proxy代理呢 專門解決這類問題的

2017年12月31日 10:55
編輯回答
淺淺

或者使用nginx也可以的

2017年5月24日 18:19
編輯回答
疚幼

現(xiàn)在在開發(fā)階段，讓后端程序開放下跨域吧，解決吊Access-Control-Allow-Origin（console提示的錯(cuò)誤，你應(yīng)該是發(fā)了個(gè)post請(qǐng)求，但是屬于復(fù)雜請(qǐng)求，瀏覽器發(fā)了個(gè)OPTIONS類型的請(qǐng)求，但是后端并沒有處理該類型的請(qǐng)求），不太建議用jsonp這些解決

2018年1月22日 00:38
編輯回答
眼雜
const APIS = [
    '/api/'
]
const target = '域名'

const onProxyReq = proxyReq => {}
module.exports = APIS.reduce((result, curr) => {
    result[curr] = {
        target,
        onProxyReq,
        changeOrigin: true
    }
    return result
}, {})

然后在 config 配置 proxyTable 即可~

2018年1月18日 08:32