当前位置:首页 > vue > 正文内容

vue中代理解决跨域

xi4年前 (2022-09-13)vue1929

跨域是什么

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

解决跨域

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

扫描二维码推送至手机访问。

版权声明:本文由曦的博客发布,如需转载请注明出处。

本文链接:http://xiblogs.top:1111/?id=3

“vue中代理解决跨域” 的相关文章

vue组件间传值

父传子利用props传值,子组件中规定props数据类型,然后父组件使用子组件时需要绑定数据在子组件上:父组件: <template> <div class="parents-div"> <!--绑定msg传入子组件-->...

数据看板可视化

数据看板可视化

前言这段时间一直在做可视化,在我的项目中有一部分是电力巡检的数据可视化。其中的数据看板比较简单,我将其单独抽离出来形成一个demo,为保密demo中数据非真实数据。先看效果。 具体效果 链接相关 浏览链接:https://xiblogs.top/original/bigScreen/29/in...

vue3实现一个抽奖小项目

vue3实现一个抽奖小项目

前言 在公司年会期间我做了个抽奖小项目,我把它分享出来,有用得着的可以看下。浏览链接:https://xiblogs.top/original/other/luckDraw/index.html项目链接:https://gitee.com/xi1213/luck-draw (欢迎star!)项目截...

纯前端实现图片验证码

前言之前业务系统中验证码一直是由后端返回base64与一个验证码的字符串来实现的,想了下,前端其实可以直接canvas实现,减轻服务器压力。 实现子组件,允许自定义图片尺寸(默认尺寸为100 * 40)与验证码刷新时间(默认时间为60秒)。同时暴露绘制验证码方法drawPic(),允许父组件直接调...

pinia的使用

pinia的使用

前言最近新开了个项目,以前老项目都是vue2+vuex开发的,都说用vue3+pinia爽得多,那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i piniamain.js中引入pinia: //main.js import { cre...

前端使用xlsx模板导出表格

前端使用xlsx模板导出表格

前言前端导出表格有很多种方案,但是表格样式一旦复杂了,那么就得用代码写excel的样式,还是比较麻烦的。每次样式不一样,就得重新写,这时使用表格模板的优势就体现出来了,想导出不同样式的表格直接修改表格模板即可。 方案我找了两种方案:1、使用xlsx-template,利用模板语法在xlsx中占位填...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。