vue純前端實作跨域

前端實作跨域的方式

更改浏覽器設定實作跨域

–disable-web-security --user-data-dir=C:\MyChrome

在圖檔位置加入上面的代碼即可,這種方式比較直接,不推薦;

vuecli3.0實作跨域

搭建伺服器

const  express=require("express");
const  app=express();
app.get("/api/aa",(req,res)=>{
    res.send("123")
})
app.listen(3000,()=>{
    console.log("http://127.0.0.1:3000");
})
           

在vue項目中建立vue.config.js檔案

//這個是在vue.config.js中的配置,如果是cli3.0,低版本的和這也差不多原理
module.exports = {
    devServer: {
        proxy: {
          '/api': {
                target: 'http://127.0.0.1:3000',//這裡寫你自己的伺服器域名
                ws: true,
                changeOrigin: true,
                pathRewrite:{
                  '^/api':'/api'  //
              }
            }
        }
    }
}
           

express快速搭建好本地模拟伺服器後,cmd中 node app.js啟動它

在請求子產品配置請求參數

//在請求api中設定
import Vue from 'vue';
import axios from 'axios' 
Vue.use('axios')
//  axios.defaults.baseURL = 'http://localhost:8080';
export  const  aa=(params)=>{
    return  axios.get("/api/aa");
}
//---------------------------------------------或者下面的方式原理一樣
import Vue from 'vue';
import axios from 'axios' 

Vue.use('axios')
 axios.defaults.baseURL = '/api';
export  const  aa=(params)=>{
    return  axios.get("/aa");
}
           

在hellowvue中發送請求

import { aa } from "../../api/index.js";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  created() {
    aa().then(res=>{
      console.log(res);
    })
  },
};
           

實作原理,相當于devServer開了一個本地伺服器,能接受其他伺服器的資料,基本原理還是因為伺服器與伺服器之間請求是不存在跨域的問題,但是他是基于webpack搭設的本地伺服器;