详解如何在nuxt中添加proxyTable代理

2024-08-16 12:19:06

背景

在本地开发vue项目的时候，当你习惯了proxyTable解决本地跨域的问题，切换到nuxt的时候，你会发现，添加了proxyTable设置并没有什么作用，那是因为你是用的vue脚手架生成的vue项目，它里面已经帮你写好了相关的proxyTable的设置代码。

build/dev-server.js

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
  options = { target: options }
 }
 app.use(proxyMiddleware(options.filter || context, options))
})

这里是采用的express中间件的形式，使用的依赖是http-proxy-middleware

nuxt也有中间件的概念，不过这个中间件不是express的中间件，那么我们怎么添加到nuxt里面去呢？

怎么做

首先，安装依赖

npm install --save-dev express http-proxy-middleware

然后在根目录创建一个文件server.js

const { Nuxt, Builder } = require('nuxt')
const app = require('express')()
var proxyMiddleware = require('http-proxy-middleware')
var config = require('./nuxt.config')
// 我们用这些选项初始化 Nuxt.js：
const isProd = process.env.NODE_ENV === 'production'
const nuxt = new Nuxt({ dev: !isProd })
// 生产模式不需要 build
if (!isProd) {
 const builder = new Builder(nuxt)
 builder.build()
}

// proxy api requests这里就是添加的proxyTable中间价的设置了
var 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))
 })
app.use(nuxt.render)//这里是添加nuxt渲染层服务的中间件

app.listen(3000)
console.log('Server is listening on http://localhost:3000')

然后在nuxt.config.js中添加如下代码

module.exports = {
  dev: {
  proxyTable: {
     '/api':
      {
        target: 'http://localhost:7001', //
        pathRewrite: { '^/api': '/' }
      }
    }
   }
}

然后node server.js运行就可以了。

觉得运行不方便还可以把命令添加到package.json文件里。

{
   "scripts": {
    "dev": "nuxt --port=8080",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "server": "node server.js"
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 设置proxyTable参数进行代理跨域

什么是代理跨域浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>.<script>.<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!.现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了
Vue-cli proxyTable 解决开发环境的跨域问题详解

和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名. 今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数. https://vuejs-t
vue2.0设置proxyTable使用axios进行跨域请求的方法

这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vuex封装的方式,只讲在当前组件中直接使用. 先在<script>中引入用prototype将axios添加为vue原生的属性,$ajax相当于axios的别名. 然后在要调用的方法或是钩子中请求,$ajax就是上面注册的axios,如果想直接用axios不想设置prototype也可以直接按官方的
详解vue-cli项目中的proxyTable跨域问题小结

什么是跨域? 同源策略规定了如果两个 url 的协议.域名.端口中有任何一个不等,就认定它们跨源了. 跨域的解决方式有哪几种? 1.JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写. JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据. JSONP 由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数.回调函数的名字一般是在请求
详解Vuejs2.0 如何利用proxyTable实现跨域请求

前言: 本地项目在请求远端服务器接口时,不可避免的会遇到跨域问题,即便是设置了Access-Control-Allow-Origin:* ,在遇到登录这些需要本地存入cookie的也会很头痛,这里笔者介绍一个在vue-cli中配置代理来解决的办法. 在~/config/dev-server.js中使用了非常强大的http-proxy-middleware包.更多高级用法,请查阅其文档. 用法: 比如我们要请求的远端服务器为:http://192.168.400:3000 proxyTable:
webpack+vue-cil中proxyTable处理跨域的方法

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

最近遇到这个需要单页访问跨域后台的问题. 可以按照如下设置: proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewrite: { '^/list': '/list' } } } 这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1. 那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true
vue proxyTable 接口跨域请求调试的示例

在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', //proxyTable: {}, proxyTable: proxyConfig.pro
使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】

本文适用人群: 会使用 vue-cli 搭建一个基本的 vue webpack 项目,本文的目录结构基于 webpack 模板结构懂得 axios 基本用法问题导向日常开发中,前端经常需要通过 ajax 从后端获取数据.而在这种前后端分离的开发模式下,往往前端项目与后端项目的 IP地址.端口号.协议大概率是不一样的,由于浏览器的安全策略设定,不进行相应配置的话,前端的请求就会被浏览器拦截掉啦. 假设某个页面组件在加载的时候会向后端发送一个请求,然后根据返回的结果来渲染页面.代码示例如下:
详解如何在nuxt中添加proxyTable代理

背景在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的proxyTable的设置代码. build/dev-server.js // proxy api requests Object.keys(proxyTable).forEach(function (context) { var options = proxyTa
详解如何在Vue中动态添加类名

目录静态和动态类有条件的类名使用数组语法使用对象语法与自定义组件一起使用快速生成类名使用计算属性来简化类能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:
详解如何在Javascript中使用Object.freeze()

Object.freeze() Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改:冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性,以及不能修改已有属性的值.此外,冻结一个对象后该对象的原型也不能被修改.freeze() 返回和传入的参数相同的对象用法 const objectExample = { prop1: 20, prop2: "羊先生" }; // 默认情况下,我们可以根据需
详解如何在Flutter中集成华为认证服务

最近发现华为AGC认证服务支持Flutter框架了,期待这个平台的支持已经很久了,所以迫不及待接入了,关联了自己的邮箱等账号. 集成步骤安装flutter环境 a) 下载Flutter sdk包,地址:https://flutter.dev/docs/get-started/install/windows 将压缩包解压到任意文件夹,例如D:\Flutter b) 将flutter命令文件添加到环境变量中,此处我添加的Path为D:\Flutter\flutter_windows_1.22.2-
详解如何在SpringBoot中自定义参数解析器

目录前言 1.自定义参数解析器 2.PrincipalMethodArgumentResolver 3.RequestParamMapMethodArgumentResolver 4.小结前言在一个 Web 请求中,参数我们无非就是放在地址栏或者请求体中,个别请求可能放在请求头中. 放在地址栏中,我们可以通过如下方式获取参数: String javaboy = request.getParameter("name "); 放在请求体中,如果是 key/value 形式,我们可以通
详解如何在Java中加密和解密zip文件

目录依赖压缩一个文件压缩多个文件压缩一个目录创建一个分割的压缩文件提取所有文件提取单个文件总结依赖让我们先把 zip4j 依赖关系添加到我们的 pom.xml 文件中. <dependency> <groupId>net.lingala.zip4j</groupId> <artifactId>zip4j</artifactId> <version>2.9.0</version>
详解如何在pyqt中通过OpenCV实现对窗口的透视变换

窗口的透视变换效果当我们点击Win10的UWP应用中的小部件时,会发现小部件会朝着鼠标点击位置凹陷下去,而且不同的点击位置对应着不同的凹陷情况,看起来就好像小部件在屏幕上不只有x轴和y轴,甚至还有一个z轴.要做到这一点,其实只要对窗口进行透视变换即可.下面是对Qt的窗口和按钮进行透视变换的效果: 具体代码 1.下面先定义一个类,它的作用是将传入的 QPixmap 转换为numpy 数组,然后用 opencv 的 warpPerspective 对数组进行透视变换,最后再将 nump
详解如何在C#中使用投影(Projection)

投影(Projection) 是一种可以将查询结果进行塑性的一种操作,你可以使用投影将一个 object 转成仅包含你需要属性的新对象,这篇文章中,我们就一起看看如何使用投影功能. C# 中的投影 LINQ 集成查询中有两个支持投影的扩展方法,分别为: Select 和 SelectMany 操作,可以用它们投影单个或者多个属性,或者投影查询的结果集到一个新的匿名类型中,还可以在投影的过程中执行: 再计算,过滤,或者其他一些必要的操作. Select 投影为了演示目的,我先构造一个
详解如何在Java中调用Python程序

Java中调用Python程序 1.新建一个Maven工程,导入如下依赖 <dependency> <groupId>org.python</groupId> <artifactId>jython-standalone</artifactId> <version>2.7.0</version> </dependency> 2.在java中直接执行python代码片段 import org.python.util
详解如何在Java中实现堆排序算法

目录算法描述实现代码测试代码算法描述堆排序算法的描述如下: 将待排序的数组调整为最大堆,此时未排序的长度 N 为数组的长度,调整的过程就是倒序将数组的前 N/2 个元素下沉的过程,每次下沉都会将较大的元素带到上面,最终将数组变为最大堆: 弹出最大堆的堆顶元素并将其移动到数组的最后面,将原本最后面的元素放到堆顶,然后将未排序的长度 N - 1,调整数组的前 N 个元素为最大堆: 重复步骤 2 直到未排序的长度为 0. 实现代码 package com.zhiyiyo.collection

详解如何在nuxt中添加proxyTable代理

相关推荐

随机推荐