前后端分离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

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 2

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

Answer 3

或者使用nginx也可以的

Answer 4

const APIS = [ '/api/' ] const target = '域名' const onProxyReq = proxyReq => {} module.exports = APIS.reduce((result, curr) => { result[curr] = { target, onProxyReq, changeOrigin: true } return result }, {}) 然后在 config 配置 proxyTable 即可~