前端vue解决跨域问题(适用于开发环境)

目录

前言

解决方案

一、配置方式

二、使用方式

?原理?

1.发送请求?

2.代理转发

3.修改请求头

4.路径重写

前言

跨域问题的存在主要是由于浏览器的安全策略所导致的。

具体来说，有以下几个主要原因：

1.同源策略 (Same-Origin Policy)：
浏览器的安全机制，要求请求必须来自相同的协议、域名和端口。
2.安全性和隐私保护：
防止恶意网站访问其他网站的数据，避免 CSRF 和 XSS 攻击。
3.CORS (Cross-Origin Resource Sharing)：
服务器可以通过设置 Access-Control-Allow-Origin 头来允许特定来源的跨域请求。

解决方案

(这里主要以修改vue配置文件里proxy的接口代理方式)

一、配置方式

在vue工程文件中找到此文件(这里以vue3为例)

找到server或者devServer(cli构建和vite构建略有不同)

在里面配置

target里写你的后台服务

server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8085', //后台服务
        changeOrigin: true, //修改源
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }

当然也可以是其他三方接口

(这里使用的是另一种配置方式)

二、使用方式

只要在你请求的位置换成你所配置的“/api/”即可

比如你所请求的地址为 ‘http://localhost:8085/login’

只要改为’/api/login’即可

原理

 devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8085', // 目标服务器地址
        changeOrigin: true, // 修改请求头的 Origin
        pathRewrite: { '^/api': '' } // 重写路径
      }
    }
  }

1.发送请求

• 当前端应用发送一个请求到 /api/xxx时，webpack-dev-server 会根据代理规则进行处理。

2.代理转发

• webpack-dev-server 检查请求路径是否匹配 /api 前缀。
• 如果匹配，则将请求转发到 http://localhost:8085/xxx。

3.修改请求头

• changeOrigin: true 会修改请求头中的 Origin，使其看起来像是直接从目标服务器发起的请求。

4.路径重写

• pathRewrite 选项用于去除请求路径中的 /api 前缀，确保请求正确发送到目标服务器。