bug：Acess to XMLHttpRequest at ‘localhost:8080/test‘ from origin ‘http://localhost:8081‘ has been b

当你在浏览器控制台遇到下面的报错：

Access to XMLHttpRequest at ‘localhost:8080/test’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

原因前后端请求跨域

在前端解决：

1. 在vue.config.js里面：

   module.exports = {
       baseUrl: './',
       assetsDir: 'static',
       productionSourceMap: false,
       // 配置跨域请求
       devServer: {
           port:8081,//项目运行的端口号
           host:'127.0.0.1',
           open:true,
           https:false,
           proxy: {
               '/api':{
                   target:'http://127.0.0.1:8080',//服务端的接口地址
                   ws:true,
                   changeOrigin:true, //开启跨域
                   pathRewrite:{
                       '^/api':''
                   }
               }
           }
       }
   }
   
   

2. 在request.js里面写：

   import axios from 'axios';
   
   const service = axios.create({
       // process.env.NODE_ENV === 'development' 来判断是否开发环境
       // easy-mock服务挂了，暂时不使用了
       // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
       baseURL:'/api',
       timeout: 5000
   });
   
   service.interceptors.request.use(
       config => {
           return config;
       },
       error => {
           console.log(error);
           return Promise.reject();
       }
   );
   
   service.interceptors.response.use(
       response => {
           if (response.status === 200) {
               return response.data;
           } else {
               Promise.reject();
           }
       },
       error => {
           console.log(error);
           return Promise.reject();
       }
   );
   
   export default service;