跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin

场景：前端跟后台联合开发的时候，在局域网内，浏览器访问别人的地址可以获取数据，但是通过接口请求，就会跨域

解决方法：现在是vue项目，用axios请求，前端这边单独解决这个问题，不需要后端处理

第一、找到config/index.js

         设置proxyTable，实际上就是设置代理路径（PS:设置config文件之后，需要重新npm run dev）

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
         '/api': {
              target: '请求地址ip加端口',
              changeOrigin: true,
              pathRewrite: {
                '^/api': '/' 
              }
            }
    },
  }

第二，新建一个封装axios的文件，如 src/api/index.js，如果不封装，上面的代理将不能识别，原因暂时不知，

            里面就是封装的接口方法

//输出通用axios实例
import axios from 'axios';

const instance = axios.create({
  timeout: 10000,
   headers: {
    'Content-Type': "application/json;charset=utf-8"
  }
});

export default {
  userLogin ( data ) {
    return instance.post('/api/user/login', data);
  },
  allUser () {
    return instance.post('/api/user');
  },
  allProduct () {
   return instance.post('/api/product')
  },
  upload (data) {
    return instance.post('/api/upload',data)
  },
  regist (data){
  	return instance.post('/api/createOrUpdateUser',data)
  }
};

第三、在main.js引用

           import instance_ from './api/index';

           Vue.prototype.instance = instance_  //axios实例

第四，就可以调用自己定义的接口了，如

this.instance.regist({             
     userId: '',       
     userName: this.username,        
 }).then(res=>{
     console.log("sd")
 }).catch(function (error) {
     console.log(error);
 });

最后，最近开发了小程序，若是有兴趣可以扫码关注一下，撩妹把妹脱单秘籍

一个是恋爱聊天脱单话术

一个是有逼格有深度的朋友圈素材文案