VUE：vue开发模式跨域报错

一、报错内容如下：

Failed to load http://192.168.1.111:8888/console/good/front/classList: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8081’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

二、说明：

 1. vue端口为8081 
 2. 后台数据端口为8080 
 3. 代理端口为8888 
 4. 使用apache代理

三、问题描述

• 地址栏输入http://localhost:8081/#/前台页面可显示页面，无法加载后台数据
• 地址栏输入http://localhost:8080后台可正常访问
• 地址栏输入http://localhost:8888/#/页面可显示，报错如上，无法加载后台数据；说明代理成功。
• 单独将请求http://192.168.1.111:8888/console/good/front/classList输入地址栏可获取后台数据

四、解决办法

• 将地址栏收入的http://localhost:8888/#/ 改为http://192.168.1.111:8888
• 前端页面可显示，可加载后台数据

五、原因

http://localhost 与 http://192.168.1.111不属于同一个域。

所谓跨域就是 跨域名，跨端口，跨协议