vue代理模式解决跨域详解

目录

• 跨域是什么
• 解决跨域
• 1、在vue.config.js中这样写：
• 2、创建一个http.ts（我是ts的，你也可以js）:
• 3、创建一个request.ts:
• 4、这样使用：

跨域是什么

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

解决跨域

我是用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);
    })
}