前后端分离WEB项目本地开发的跨域问题

Question

开发环境： MAC OS， APACHE, PHP7.2, ThinkPHP5, vue.js 3.0, axios。

后端接口是由ThinkPHP5开发，返回数据的时候已经加上了跨域的消息头。部署在本地IP：192.168.0.3:80。
通过POSTMAN可以访问到接口返回的数据。

刚刚修改了想服务器返回的HEADER，错误依旧。

前端页面用的是通过vue-cli构建的项目，运行在192.168.0.3:8080。现在想在前端调用后端的接口，但是一直提示如下错误信息：

请问这种情况应该如何设置跨域？没有经验，昨天折腾了一晚上弄到今早5点都没弄好。。着急，请各位有经验的朋友多多指教，谢谢！

Answer 1

你已经用了cli怎么不用proxy代理呢 专门解决这类问题的

Answer 2

vue-cli里有代理设置。
但是！！！怕麻烦的话，啥都别说了。不如试试这个，一劳永逸。
可能是东半球解决跨域问题最简单粗暴的方法：
1.chrome复制快捷方式。
2.右键快捷方式，属性----目标
改为以下（确保这些安装路径都是存在的）

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

3.优势：甚至可以本地页面调试线上接口。。。

Answer 3

现在在开发阶段，让后端程序开放下跨域吧，解决吊Access-Control-Allow-Origin（console提示的错误，你应该是发了个post请求，但是属于复杂请求，浏览器发了个OPTIONS类型的请求，但是后端并没有处理该类型的请求），不太建议用jsonp这些解决

Answer 4

或者使用nginx也可以的

Answer 5

const APIS = [
    '/api/'
]
const target = '域名'

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

然后在 config 配置 proxyTable 即可~