vue中代理解决跨域

跨域是什么

简单的讲就是你在一个地方使用另一个地方的资源，被浏览器给挡下来了，不让不用！当然，它挡下来是有自己理由的：为了安全(╬▔皿▔)╯。

解决跨域

我是用vue开发的，就vue代理模式解决跨域说明一下。
1、在vue.config.js中这样写：

 let devProxy = {

  //获取ip信息

  '/getIpMsg': {

    target: "https://whois.pconline.com.cn/ipJson.jsp",//真实地址

    ws: true,

    changeOrigin: true,

    pathRewrite: {

      '/getIpMsg': ''

    },

  },

};

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

  devServer: {

    port: 8080,//端口

    open: false,//项目启动后是否在浏览器自动打开

    proxy: devProxy//代理服务器

  },

}) 

target就是自己需要代理的真实地址getIpMsg你是可以自定义的。
2、创建一个http.ts（我是ts的，你也可以js）:

 import axios from "axios";

//创建请求

function createServe(config: any) {

    let serve = axios.create({

        timeout: 5000 //超时

    });

    //请求拦截器

    serve.interceptors.request.use(

        config => {

            return config;

        },

        error => {

            return Promise.reject(error)

        }

    )

    //响应拦截器

    serve.interceptors.response.use(

        response => {

            return response;

        },

        error => {

            return Promise.reject(error)

        }

    )

    return serve(config);

}



export default createServe; 

3、创建一个request.ts:

 import createServe from "./http"



//获取ip信息

export function getIpMsg(params = {}) {

    return createServe({

        method: "GET",

        url: '/getIpMsg',

        params

    })

} 

4、这样使用：

 import { getIpMsg } from "@/api/request";



function test(){

	getIpMsg()

	.then(res => {

		console.log(res);

	})

}