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

首先了解一下同源策略

同源策略（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'
  })
}

看网络：请求成功

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