首页 > 其他分享 >Vue 跨域配置

Vue 跨域配置

时间:2023-06-05 14:37:14浏览次数:32  
标签:191.196 axios http 跨域 重启 配置 Vue api


在package.json同级目录下新建文件vue.config.js;内容如下:

module.exports = {
    //自行复制黏贴
    devServer: {
        proxy: {
            '/api': {//以/api开头的地址会被替换成下面的target
                target: 'http://191.196.21.1:8080/',  // 接口真实地址
                changeOrigin: true,  //是否跨域
                pathRewrite: {
                    '^/api': ''   //需要rewrite的,
                }
            }
        }
    }
};

axios基础路径改为:'/api'

import axios from 'axios'

// 基础路径
axios.defaults.baseURL = '/api'
// 挂载到Vue的原型链上,这样一个组件都可以通过this来访问axios
Vue.prototype.$http = axios
this.$http.post('auth/login', this.loginForm)

接口地址:

http://191.196.21.1:8080/auth/login

最后:也是最重要的一点:重启服务、重启服务、重启服务

标签:191.196,axios,http,跨域,重启,配置,Vue,api
From: https://blog.51cto.com/u_14121041/6415408

相关文章

  • Vue项目中使用@路径
    第一步:安装一下pathnpminstallpath--save第二步:在vue.config.js文件中配置一下constpath=require("path");functionresolve(dir){returnpath.join(__dirname,dir);}module.exports={//跨域配置devServer:{proxy:{'/java&......
  • SpringBoot2.x跨域问题(CrossOrigin失效问题)
    方法一SpringBoot版本的不同,CrossOrigin失效了,正确配置如下:@CrossOrigin(originPatterns="*",allowCredentials="true",maxAge=3600)方法二如果以上方法还是不生效,最后的终极方法可以进行硬编码进行跨域设置:对需要跨域的接口,进行Response对象设置可跨域URL设置(*代表......
  • SpringBoot配置多个RabbitMq
    YMLrabbitmq:first:username:${app.appkey}password:${app.appkey}virtual-host:${app.appid}addresses:x.x.x.x:5672,x.x.x.x:5672#集群second:username:guestpassword:guestvirtual-host:/host:......
  • vue的混入mixin
    功能:可以说把各个组件共用的配置提取成一个混入对象使用方式第一步订阅混合,例如:constobj={data(){...},methods:{...},...}第二部使用混合,例如:1、引入对象importxxxfrom"..."2、使用混入(1).全局混入:Vue.mixin(xxx)(2).局部混入:mixins:['xxx']......
  • vue3全局注册的另一种方式——插件注册
    1.新建一个index.ts,用于管理所有全局组件//引入项目中全部的全局组件importSvgIconfrom"./SvgIcon/index.vue";importPaginationfrom"./Pagination/index.vue";//全局对象constallGlobalComponent=<any>{SvgIcon,Pagination};//对外暴露插件对象exportde......
  • vue的插件使用
    vue插件功能:用于增强Vue本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。1、定义插件:对象.install=function(Vue,options){//1、添加全局过滤器Vue.filter(....)//2、添加全局指令Vue.directive(.......
  • nginx配置图片服务器
    startnginx           //运行nginx nginx-sstop     //停止nginxnginx-sreload   //重新加载配置文件(如修改配置文件后,可通过该命令重新加载)nginx-squit     //退出nginxnginx-v        //......
  • 系统化学习前端之Vue(vue2 组件通信)
    前言前文vue2基础中聊过,页面本质是DOM树,而在vue2中组件=vm实例对象=DOM。因此,页面其实也是组件树构成,组件之间形成父子关系,兄弟关系等,相互之间通信也是组件树的必须要求。vue2组件通信组件通信即组件之间的数据传递。props和$emit$attrs和$listener$parent......
  • RabbitMQ配置文件及环境变量
    http://www.rabbitmq.com/configure.htmlMechanismDescriptionConfigurationFile(s)definesserverandpluginsettingsforTCPlistenersandothernetworking-relatedsettingsTLSresourceconstraints(alarms)authenticationandauthorizationbackendsmessagestore......
  • ubuntu20.4安装配置ros系统(noetic)
    不同ubuntu版本对应的ros版本名称ubuntu版本ros1版本ros2版本16.04kineticardent18.04melodicdashing20.04noeticfoxy1、打开软件与更新,切换ubuntu软件源(国内阿里云)2、打开终端,添加ros软件源(中科大镜像站)sudosh-c'./etc/lsb-release&&echo"......