首页 > 其他分享 >VUE前端请求跨域问题解决

VUE前端请求跨域问题解决

时间:2023-03-01 23:56:34浏览次数:43  
标签:VUE 跨域 config 前端 request api user true

解决方法:

  1. vue.config.js文件配置:
    module.exports = {
        devServer: {
            open: true,
            host: '192.168.1.193',
            port: 8080,
            https: false,
            //以上的ip和端口是我们本机的;下面为需要跨域的
            proxy: { //配置跨域
                '/api': {
                    target: 'http://api.tp6.com:6110',
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {'^/api': '/api'}
                }
            }
        },
    
        runtimeCompiler: true
    }
  2. axios配置:
        //2.1 请求拦截的作用
        instance.interceptors.request.use(config => {
                config.headers['Content-Type'] = 'application/json;charset=utf-8';
                let user = localStorage.getItem("uId")?JSON.parse(localStorage.getItem("uId")):null
                if (user) {
                    config.headers['token'] = localStorage.getItem("token") // 让每个请求携带自定义token 请根据实际情况自行修改
                }
                return config;
        }, err => { })
  3. axios具体的请求
    import { request } from "./request"
    
    export function getUserData() {
        return request({
            url: 'user/index'
        })
    }

     

标签:VUE,跨域,config,前端,request,api,user,true
From: https://www.cnblogs.com/st903/p/17170395.html

相关文章

  • jenkins发布前端版本号统一优化
    jenkins发布前端版本号统一优化之前每周一坑提过,pc端和手机端发布版本号不一致的问题【https://www.cnblogs.com/windysai/p/16659881.html】,现在想统一起来。因......
  • 学习前端遇到的问题以及解决办法
      图中的abc和123相隔很远,按道理来说应该是上下紧贴着的两层的,原因是因为上面的像素高超了一点点导致它下移动了,我们可以用overflow:hidden;放在上面那个盒子里面解决......
  • 跨域请求详解(看懂这篇博客,彻底搞懂跨域问题)
    跨域请求详解同源策略同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是......
  • 路飞项目 day03 前端配置、后台主页、项目依赖问题
    一、路飞项目前端配置1.先删除一些不要的​ 删除多余的组件,只要app和首页组件​ 然后改一下组件的内部代码-App.vue中______________<template><divid="app"><rou......
  • 社招中级前端笔试面试题总结
    typeofnull的结果是什么,为什么?typeofnull的结果是Object。在JavaScript第一个版本中,所有值都存储在32位的单元中,每个单元包含一个小的类型标签(1-3bits)以及......
  • 16.设置允许跨域
      @ConfigurationpublicclassBianenCorsConfiguration{@BeanpublicCorsWebFiltercorsWebFilter(){UrlBasedCorsConfigurationSourcesour......
  • 路飞:路飞前端全局css,全局配置文件、配置axios实现前后台交互、安装vue-cookies、安装e
    目录一、路飞前端全局css,全局配置文件1.1整理项目1.2设置全局css1.3配置全局js二、配置axios实现前后台交互三、安装vue-cookies四、安装elementui五、安装bootstrap和j......
  • ShopWind 多商户商城更新,Vue 3 前后端分离,页面自定义装修
    本次为V4版本更新,新系统架构(技术栈)vue3 + vite (打包编译工具)+ Composition API(组合式 API setup) + Element Plus + vueRouter (路由)第三方组件:axios (数据......
  • vue 模拟set del 方法
    上篇主要对数组格式数据进行响应式处理,vue 有set 和del 方法可以对数组和对象进行修改和删除。代码如下:数组类型的数据修改和删除时候,只需要调用splice方法就可以,在上......
  • VUE2 条件渲染
    条件渲染v-show特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉了。<divv-show="flag"></div><script>data(){return{flag:true......