跨域問題Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin
阿新 • • 發佈:2019-02-10
場景:前端跟後臺聯合開發的時候,在區域網內,瀏覽器訪問別人的地址可以獲取資料,但是通過介面請求,就會跨域
解決方法:現在是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); });