Vue中利用proxy代理解决跨域问题

文章介绍了Web的同源策略及其安全作用,详细讲述了在Vue项目中如何利用.env配置文件、proxy代理以及axios封装来解决跨域请求的问题,通过devServer.proxy配置将请求转发至目标API服务器,从而绕过同源策略限制。
摘要由CSDN通过智能技术生成

首先了解一下同源策略

同源策略(Same-Origin Policy)是一种安全机制,用于保护Web浏览器中不同源网页之间的数据隐私和安全。同源指的是协议(如HTTP、HTTPS)、域名和端口号都相同。

根据同源策略,浏览器只允许网页从同源网页加载资源,而不允许从不同源的网页获取或操作数据。这是因为跨源请求可能会引发安全漏洞,如跨站点脚本攻击(XSS)和跨站请求伪造(CSRF)。

同源策略限制了以下行为:

  1. 脚本访问不同源文档的 DOM。
  2. AJAX 请求发送到不同源的服务器。
  3. 不同源窗口之间的跳转、通信和数据共享。

所谓“同源”指的是“三个相同”:

  1. 协议相同
  2. 域名相同
  3. 端口相同

不满足同源策略的请求会被浏览器拦截,导致请求失败。
 

在Vue中提供了proxy代理来解决跨域请求问题


(一)

扩展

.env  文件(用来指定环境变量,被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用)

定义开发环境的环境变量VUE_APP_BASE_API:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

#.env 环境文件是通过运行 vue-cli-service 命令载入的,因此环境文件发生变化,你需要重启服务

 .env.development 

# 开发环境
VUE_APP_BASE_API = '/dev'
VUE_CLI_BABEL_TRANSPILE_MODULES = true

(二)

define.js    (名字可以随意取)文件中定义并将APIURl暴露出去(这里是为了项目后期更改更方便)

(三)

request.js  (名字可以随意取) 文件中封装请求 ,并暴露出去(也是为了方便)

这里给出主要代码:

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import define from '@/utils/define'


// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: define.timeout, // request timeout
})

(四)

vue.config.js  文件中配置 devServer.proxy代理

devServer: {
  port: port,
  open: false,
  overlay: {
    warnings: false,
    errors: true
  },
  // 接口转发
  proxy: {
    '/dev': {                     //  /dev表示拦截以/dev开头的请求路径
      target: define.APIURl,      //  跨域的域名
      changeOrigin: true,         //  是否开启跨域     
      pathRewrite: {              //  重写路径
        '^/dev': ''               //  把/dev变为空字符
      }
    }
  }
},

看成果:

请求是这样的:

// 获取标准库详情
export function getCriterionStoreDetail(id){
//request请求前面已经封装好了,只需传入相应参数就可
  return request({
    url:'/api/example/Manage/CriterionStore/'+id,
    method:'get'
  })
}

看网络:请求成功

小白一枚,如有错误,感谢纠正

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值