vue中proxy代理的用法(解决跨域问题)

目录
  • 声明
    • 1. 首先我们应该知道
    • 2. 跨域,什么是跨域呢?
  • 问题
  • 跨域的解决方案
  • 代理服务器是如何解决跨域的?
  • proxy配置
    • 以vue cli3.0为例
  • 总结

声明

1. 首先我们应该知道

前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说:

axios.get('/login')

axios.get('/hello')

当我点击发送按钮之后,以上两行代码实际为:

http://localhost:8080/login

http://localhost:8080/hello

其中 localhost:8080 就是自己项目所在的地址了。实际前端就会根据以上的地址来访问后端程序了。

2. 跨域,什么是跨域呢?

首先,明白什么是同源策略?同源就是指 协议、域名、端口 都要相同,其中任何一个不同都会出现跨域。例如:

http://www.baidu.com:8000

// http 是协议

// www.baidu.com 是域名

// 8000 是端口

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。

这里说明一下,无法跨域是浏览器对于用户安全的考虑。是浏览器的锅。

同源策略限制了一下行为: Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去。

前后端分离的模式下,前后端的域名是不一致的,所以就会出现跨域问题。

问题

当我们开发完前端一个功能之后,需要运行调试 ,通常前后端分离情况下,两套程序都运行起来之后,肯定会出现 协议、域名、端口不一致的形况吧。

那么前端调用后端接口时就会产生跨域问题。怎么办呢?就需要代理(proxy)出场了。

跨域的解决方案

解决跨域的方案有很多,比如:jsonp、cors、Node代理、nginx反向代理。这里我们只讨论 proxy。

vue中的proxy就是利用了Node代理。

代理服务器是如何解决跨域的?

这样就可以串通了,前端通过axios发送请求时,会默认发送给本地的特性,来发送给前端配置的代理,代理根据特定规则,将地址转换为后端的接口,并请求后端接口,这样就解决了跨域的问题了。

那前端vue中怎样配置代理服务器呢?

proxy配置

假如我现在想请求后端的 一个接口 例如:http://www.aaabbbccc.com/login ,这样我们应该怎样配置代理服务器呢?

以vue cli3.0为例

// vue.config.js
  devServer: {  //开启代理服务器
    proxy:{
      "/api": {  // /api是自行设置的请求前缀,按照这个来匹配请求,有这个字段的请求,就会走到代理来。
          target: "http://www.aaabbbccc.com", // 需要代理的域名,目标域名,会替换掉匹配字段之前的路径
           ws: false, // 是否启用websockets
          changeOrigin: true, //是否跨域
          pathRewrite: {  //重写匹配的字段,如果不需要放在请求路径上,可以重写为""
              "^/api": ""
          }
      },

  },
  }

  //vue cli2 .0 的放在 config文件夹中的index.js  中
    dev: {
    proxyTable:{
      "/api": {
          target: "http://www.aaabbbccc.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启跨域
          pathRewrite: {  //重写请求路径上匹配到的字段,如果不需要在请求路径上,重写为""
              "^/api": "",

          }
      },
  },
  }

以上配置中,我配置了一个 /api,只有包含这个请求的路径才会走代理,例如:

http://localhost:8080/api/login //这个就可以走代理

http://localhost:8080/login //这个就不行

可以看到,要想所有的请求都进入代理中,就必须包含/api这个路径,那么我可以对axios进行二次封装,给所有的请求加这个前缀,代码如下:

const requests = axios.create({

  baseURL:'/api', // 设置通用请求的地址前缀

  timeout:10000  //请求超时的时间
});
export default requests  //将requests实例,对外进行暴露

发送请求可以写为:

requests.get('/login').then((response) => {})
requests.get('/getlist').then((response) => {})
requests.get('/user/hello').then((response) => {})

此时我发送的请求就是:

http://localhost:8080/api/login

http://localhost:8080/api/getlist

http://localhost:8080/api/user/hello

通过代理的 target属性 加工之后就是 :

http://www.aaabbbccc.com/api/login

http://www.aaabbbccc.com/api/getlist

http://www.aaabbbccc.com/api/user/hello

就是把 /api 之前的路径 修改成了 target里配置的 目标服务器的路径。

在通过 pathRewrite属性 将 /api 替换为空 为:

http://www.aaabbbccc.com/login

http://www.aaabbbccc.com/getlist

http://www.aaabbbccc.com/user/hello

这样就可以访问到后端的对应接口了。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vant/vue跨域请求解决方案

    因为后端给的接口不是本地的接口,所以需要跨域来获取接口数据 在vue.config.js中对其进行配置 devServer: { host: 'localhost', port: 3030, // 端口 https: false, proxy: { // 配置跨域 '/api': { target: 'http://xx.xx.xx.xxx', // 代理的接口域名以及端口号: ws: true, // 支持ws协议:websocket的缩写: changeOrigin: true, // 是否

  • vue3解决跨域问题详细代码亲测有效

    目录 vue3解决跨域问题详细代码亲测有效 关于解决vue3的跨域问题 项目场景: 原因分析: 解决方案: vue3解决跨域问题详细代码亲测有效 1.在vue.config.js中 放入以下代码: module.exports = { devServer: { proxy: { '/api': { target: 'http://api.tubecoin.org', //这里填入你要请求的接口的前缀 ws: true, //代理websocked changeOrigin: true, //虚拟

  • 解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK

    目录 请求场景: 跨域报错信息 Vue2跨域问题报错截图 解决方法 解决方法解析: 总结 请求场景: 当前页面URL:http://127.0.0.1:8000/testcase 跳转请求页面URL:http://127.0.0.1:5000/testcase_orm 使用axios请求 时 页面提示跨域报错 跨域报错信息 Access to XMLHttpRequest at ‘http://127.0.0.1:5000/testcase_orm’ fromorigin ‘http://loc

  • vue使用vite配置跨域以及环境配置详解

    目录 如何配置跨域,代理域名 区分开发环境和生产环境,以及预发布环境 可以做什么事 补充:解决跨域常用方法 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 如何配置跨域,代理域名 不管使用什么脚手架,配置代理都是绕不开的话题,下面是vite的代理 server: { proxy: { '/api'

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • VUE跨域详解以及常用解决跨域的方法

    目录 跨域 解决跨域常用方法: 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 跨域 当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了. 跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核

  • vue代理模式解决跨域详解

    目录 跨域是什么 解决跨域 1.在vue.config.js中这样写: 2.创建一个http.ts(我是ts的,你也可以js): 3.创建一个request.ts: 4.这样使用: 跨域是什么 简单的讲就是你在一个地方使用另一个地方的资源,被浏览器给挡下来了,不让不用!当然,它挡下来是有自己理由的:为了安全(╬▔皿▔)╯. 解决跨域 我是用vue开发的,就vue代理模式解决跨域说明一下. 1.在vue.config.js中这样写: let devProxy = {   //获取ip信息   '/

  • vue中proxy代理的用法(解决跨域问题)

    目录 声明 1. 首先我们应该知道 2. 跨域,什么是跨域呢? 问题 跨域的解决方案 代理服务器是如何解决跨域的? proxy配置 以vue cli3.0为例 总结 声明 1. 首先我们应该知道 前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说: axios.get('/login') axios.get('/hello') 当我点击发送按钮之后,以上两行代码实际为: http://localhost:8080/login http://localh

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • springboot中如何通过cors协议解决跨域问题

    1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处理. 但是jsonp方式也同样有不足,不管是对于前端还是后端来说,写法与我们平常的ajax写法不同,同样后端也需要作出相应的更改.并且,jsonp方式只能通过get请求方式来传递参数,当然也还有其它的不足之处,针对于此,我并没有急着使用jsonp的方式来解决跨域问题,去网上找寻其它方式,也就是本文主

  • vue+Java后端进行调试时解决跨域问题的方式

    今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢? 首先,要了解什么叫跨域访问? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,举个例子: http://www.123.com/index.html 调用 http

  • 详解vue-cli本地环境API代理设置和解决跨域

    前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de

  • Vue中iframe 结合 window.postMessage 实现跨域通信

    目录 一.前言 二.应用场景 2.1 嵌入页面 2.2 postMessage 实现父子页面通信 2.3 子页面向父页面传值 2.4父页面代码: 一.前言 什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 什么是postMessage? window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数

  • vue.js使用代理和使用Nginx来解决跨域的问题

    使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包

  • vue服务器代理proxyTable配置如何解决跨域

    目录 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 2 .常见情况 3.应用方式 4.具体配置实例 5.配置思路 Vue.proxyTable是什么? 为什么会有proxyTable存在? 配置proxyTable 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求(没有匹配到静态文件的请求),代理到一个另一个地址,从而解决跨域的问题. 2 .常见情况 前端在向后端进行资源请求的时候,后端若

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

随机推荐