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

vue中代理解决跨域

xi4年前 (2022-09-13)vue1908

跨域是什么

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

解决跨域

我是用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中使用sass

vue中使用sass

安装1、安装sass:npm i sass。2、安装sass-loader:npm i sass-loader@ 10.1.1。(安装sass-loader时会出现版本报错,建议使用10.1.1) 使用在style标签中写入lang=’scss’(勿误写为sass),样式代码直接嵌套编写,更加直观...

vuex的使用

vuex的使用

vuex是什么vuex是一个专门为vue开发的状态管理工具,它采用集中式存储管理应用的所有组件的状态,其核心是state。 vuex中有什么state:存放状态数据的地方,其中数据是响应式的,数据改变对应组件的数据也会跟新改变,禁止直接改变state中的数据否则数据无法被调试工具监测。getter...

vue动态绑定样式

vue动态绑定样式

每次点击方块时通过三元表达式,改变对应的class,每一个不同的class对应不同的样式,从而通过改变class实现样式的切换。 <template> <div class="container"> <!--通过三元表达式选择cla...

vscode使用vue代码模板

vscode使用vue代码模板

1、vscode中打开:文件>首选项>用户片段>输入vue按下回车2、复制下面代码并保存。 { "Print to console": { "prefix": "vue",...

vue自定义组件的点击事件失效

vue自定义组件的点击事件失效

在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写,事件则会失效:正确写法应该是这样:...

vue打包后dist的使用

vue打包后dist的使用

发现问题vue项目完成打包出dist后准备打开index.html,发现居然页面是一片空白,f12一片报红。 分析问题经过多次网上查询后发现这是由于vue打包时,脚手架会帮你配置好大量参数,但其中路径publicPath被配置为了”/“,需要手动修改。 解决办法1、将vue.config.js中...

发表评论

访客

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