vue 非常规跨域实现 proxyTable 设置及依赖

1、config/index.js  设置跨域的地址

     proxyTable: {

‘/api‘: {    //跨域标识     请求地址为‘http://1xxx.xxx.com/index/list’, 请求时 “/api/index/list”

target: ‘http://1xxx.xxx.com‘,

changeOrigin: true,   //允许跨域

pathRewrite: {            //重新跨域标识

‘^/api‘: ‘‘

}

}

},

2、build/webpack.dev.conf.js  引入express、http-proxy-middleware,如下:

const proxyMiddleware = require(‘http-proxy-middleware‘)

var express = require(‘express‘)

var app = express()

// proxy api requests

const proxyTable=config.dev.proxyTable;

Object.keys(proxyTable).forEach(function (context) {

var options = proxyTable[context]

if (typeof options === ‘string‘) {

options = { target: options }

}

app.use(proxyMiddleware(options.filter || context, options))

})

原文地址:https://www.cnblogs.com/resultwp/p/9945606.html

时间: 2024-08-29 17:11:09

vue 非常规跨域实现 proxyTable 设置及依赖的相关文章

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

vue resource 携带cookie请求 vue cookie 跨域

vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请

在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服务器去拿数据.这时候需要服务器做一个代理

Vue学习----webpack跨域问题proxyTable

跨域问题,搜索https://www.cnblogs.com/wancheng7/p/8987694.html,先学习一下, 在根目录config文件下的index.js中添加代码 '/api': { target: 'http://www.abc.com', //目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/api' //重写接口 } }, 在App.vue下获取,将跨域的域名替换成/api/ created(){ th

Vue代理&跨域

Vue 本地代理 纯前端技术解决跨域 vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使用window.name 或location.hash 来进行跨域 使用HTML5中的window.postMessage方法来跨域 图片ping或script标签跨域 WebSocket CORS 以上方法或多或少都有一定限制,有的不支持post有的需要后台配

vue + vue-resource 跨域访问

使用vue + vue-resource进行数据提交,后台使用RESTful API的方式存取数据,搞了一天,终于把后台搞好了.进行联合调试时,数据不能提交,报403错误: XMLHttpRequest cannot load http://localhost:8090/xxx/xxx. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header

vue flask 跨域问题

最近一直忙着检查点测试平台的开发.之前主要是从事后端开发,现在所有的东西都需要自己一个人撸.也遇到了之前在后端服务开发中未碰到的问题,在此记录下解决的全过程. 前端采用vue + element的技术,开发完成后生成静态文件扔到nginx服务器上.后端用python的flask,完成之后放到gunicorn中.两个单独开发到没有什么太大问题,问题就出在将两个合在一起的时. 第一次合并的时候出现了下面的问题,额...跨域问题,问题不大改改后台的响应就ok,就写了一个简单的装饰器 装饰器代码: de

vue项目跨域问题

跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容).需要B网站在响应中加头 postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容).需要修改B网站的代码 iframe window.name 传值得方式很巧妙,兼容性也很好.但是也是需要你能修改B网站代码 服务端主动请求B网站,兼

Vue+Django 跨域问题配置

跨域请求问题: 1.Django后端解决办法: # 后端下载模块: pip install django-cors-headers # settings配置: MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', # 'dj