vue-cli项目本地代理实现跨域请求

  使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域请求,在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev:

dev: {
    env: require(‘./dev.env‘),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    proxyTable: {},
    cssSourceMap: false
  }

  只要修改里面的proxyTable: {}项

proxyTable: {
    ‘/api‘: {  //代理地址
        target: ‘http://10.1.0.34:8000/‘,  //需要代理的地址
        changeOrigin: true,  //是否跨域
        secure: false,
        pathRewrite: {
            ‘^/api‘: ‘‘   //本身的接口地址没有 ‘/api‘ 这种通用前缀,所以要rewrite,如果本身有则去掉
        }
    }
}

  然后重启项目npm run dev

  请求数据时URL前加上“/api”就可以跨域请求了

self.$axios.get(‘/api/queryRole‘, {params: params})
    .then((res) => {
        console.log(res);
    }).catch((err) => {
        console.log(err);
    })

原文地址:https://www.cnblogs.com/goloving/p/8901189.html

时间: 2024-07-30 00:05:53

vue-cli项目本地代理实现跨域请求的相关文章

【vue】--代理方式跨域

正向代理与反向代理 前端使用代理主要用于跨域请求, 关于跨域:常用的方式 JSONP:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数. CORS:服务器设置HTTP响应头中Access-Control-Allow-Origin值,解除跨域限制 但是这两个跨域方案都存在一个致命的缺陷,严重依赖后端的协助, 代理 就可以作为 前端独立解决跨域的方案 正向代理 是指一个位于客户端和目标服务器(target server)之间的服务器,为了从目标服务器取得内容,客户端向代理发送

vue-cli反向代理跨域请求

最近一直在通过 webpack + Vue-CLI 来学习,想跨域调用接口数据.奈何因同源策略,浏览器限制,导致资源请求一直不成功. 现在整理一下思路 - - 跨域: 指浏览器受同源策略限制,不能够访问不同域的页面(脚本). 同源策略限制已下行为: LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去(一个XMLHttpRequest对象的请求) 什么是同源策略? Netscape(网景)公司的一个安全策略.所谓的源指的是 Protoco

项目中经常遇到的跨域请求的几种方法

什么是跨域 JSONP proxy代理 cors xdr 关于跨域无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Firefox 3.5 及其以后的版本.Chrome浏览器.Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求.在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息. 如

php分享二十五:跨域请求

问题: 跨域请求有几种方式? jsonp支持哪几种请求方式? 支持post请求吗? 支持get请求吗? 由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域.具体可以查看下表: 方法一:JSONP 这种方式主要是通过动态插入一个script标签.浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下). <script> var _script = document.createElement("scr

探讨跨域请求资源的几种方式

什么是跨域 JSONP proxy代理 cors xdr 由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域.具体可以查看下表(来源) JSONP 这种方式主要是通过动态插入一个script标签.浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下). 1 <script> 2 var _script = document.createElement('script'); 3 _script.type = &

跨域请求的概念和解决办法

相关概念 同源是指相同的协议.域名.端口,三者都相同才属于同源. 同源策略浏览器处于安全考虑,在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本,站外其他来源的脚本同页面的交互则被严格限制. 跨域由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域 跨域资源共享(Cross Origin Resource Sharing,CORS)是一个解决跨域问题的好办法,从而可以使用XHR从不同的源加载数据和资源. 看看哪些情况下属于跨域访问: 解决办法

Django前后端分离跨域请求问题

一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应,同源策略也是浏览器针对请求的安全问题所作出的一种保护行为.针对跨域问题,可以有下面的解决方式: JSONP方式 自定义中间件,设置响应头 使用django-cors-headers包 二.解决方式 (一)自定义中间件 JSONP本质上是利用html的一些不受同源策略影响的标签属性src,例如:<a

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理