1. 程式人生 > >跨域問題Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin

跨域問題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);
 });