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搭设的本地服务器;