vue-cli3以上框架解决跨域问题

事实上,3以上的版本安装好以后没有主配置文件,它不像2的版本有专门的config文件夹可以处理配置,所以我们需要新建vue.config.js  【默认情况下,3以上的版本可以直接识别这个js文件,把它当做自己的配置文件】

步骤如下:

1、在项目框架的根目录下新建文件:vue.config.js

2、重启项目,这样的话新建的文件就可以被识别了

3、给新建的文件内添加解决跨域的代码部分

module.exports = {
    outputDir: ‘serve‘,   //build输出目录
    assetsDir: ‘assets‘, //静态资源目录(js, css, img)
    lintOnSave: false, //是否开启eslint
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost",
        port: ‘8081‘,
        https: false,   //是否使用https协议
        hotOnly: false, //是否开启热更新
        proxy: {
             ‘/api‘: {
                target: ‘http://www.1707laravel.com/api‘, //API服务器的地址
                ws: true,  //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {   //重写路径 比如‘/api/aaa/ccc‘重写为‘/aaa/ccc‘
                    ‘^/api‘: ‘‘
                }
            }
        }
    }
}

配置好以后就可以执行请求了,例如post请求是:

this.$axios.post(‘/api/register‘,{
     name:this.user_name,
     email:this.user_email,
     pwd:this.user_pwd,
     rpwd:this.user_rpwd,
     phone:this.user_phone,
     sex:this.user_sex
 })
  .then(function (res) {
      console.log(res);
  })

原文地址:https://www.cnblogs.com/jiangshiguo/p/12122120.html

时间: 2024-10-07 22:00:54

vue-cli3以上框架解决跨域问题的相关文章

vue前后端分离解决跨域问题

用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现. vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html 我自己在网上找了2个接口做测试: CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false 掘金:https://

Vue 需要使用jsonp解决跨域时,可以使用(vue-jsonp)

1,执行命令 npm install vue-jsonp --save 2.src/main.js中添加: import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 3.其它组件中基本使用方法: let obj = { 'location':item.point.lat+','+item.point.lng, 'output':'json', 'ak':'***' } this.$jsonp('https://api.map.baidu.com/geo

vue webpack配置解决跨域问题

现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 http.js post (url, data) { return axios({ method: 'post', baseURL: '/api', url, data: data, timeout: 10000, headers: { 'X-Requested-With': 'XMLHttpRe

vue开发环境和生产环境里面解决跨域的几种方法

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu.com访问https://a.baidu.com: #端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80: #域名跨域 http://a.baidu.com访问http://b.baidu.com:   现在很多公司都是采用前后分离的方式开发.那么出现经常和会

解决使用elementUI框架el-upload跨域上传时session丢失问题

解决方法一: 1.使用elementUI框架el-upload跨域上传时,后端获取不到cookie,后端接口显示未登录,在添加了 with-credentials="true"后依然不生效 前端会报上面的错误,解决方式:后端把把*号改成httpServletRequest.getHeader("Origin") 解决方法二: 1.把config目录下的index.js文件打开,修改proxyTable属性的设置: 考虑到这个这个目标路径可能需要修改,所以打包后需要单

vue中解决跨域问题

方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 方法2.使用JQuery提供的jsonp methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', data

vue项目开发,用webpack配置解决跨域问题

今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 2,使用jsonp进行跨域 getData () { var self = this $.

一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 前言 关于start()的补充 跨域解决方案 JSONP CORS CORS跨域演示 结束语 参考文献 前言 这周工作比较忙,一直没有时间学习SignalR,大致希望一周能写一篇关于SignalR的文章.上一篇用Persistent Connections方式实现了个简单的在线

java SSM 解决跨域问题

什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域 前段时间接触一个新的项目,原本想着做成前后端分离的,但是这样就会涉及到 ajax 跨域的问题,那时候没解决,所以就没搞前后端分离,但是今天的项目又接触到跨域(前后端分离的问题),研究了一晚上,查了很多资料,也跟一些前辈沟通过,用的方法都不同, 有人说用谷歌的插件,有人说用Ng