在vue3项目中解决浏览器跨域问题

在vue3项目配置proxy代理实现浏览器跨域

跨域请求（Cross-Origin Resource Sharing, CORS）是一种机制，它允许在网页中发起请求时，从一个源（origin）访问另一个源的资源。这里的“源”指的是协议（如http或https）、域名（如example.com）和端口号（如80或443）的组合。出于安全考虑，浏览器默认会阻止跨域请求，因为这可能会泄露敏感信息或允许恶意网站读取其他网站的数据。如果浏览器出现如下报错，说明你在向服务端发起跨域请求时，遇到了 CORS（跨源资源共享）策略的限制

Access to XMLHttpRequest at 'http://127.0.0.1:3000/<请求路径>' from origin 'http://127.0.0.1:<端口号>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法：

方法一：

步骤1、在vite.config.js文件（使用vite创建的vue3项目就是在vite.config.js，使用vue-cli创建的vue3项目就是在vue.config.js文件里）里面添加以下代码就可以实现一个代理服务器解决跨域请求。

这段配置是用于设置一个代理服务器的规则，通常用在开发环境中，以便将前端应用对后端api的请求转发到实际的后端服务上

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 // 设置代理解决跨域请求问题
 server: {
  proxy: {
   '/api': {//匹配/api开头的请求
​    target: 'http://127.0.0.1:3000',//转发的目标服务器
​    changeOrigin: true,//允许跨域
​    rewrite: (path) => path.replace(/^\/api/, '')//在请求转发前移除/api
   }
  }
 }
})

（使用vue-cli创建的vue3项目的配置有些许不同，总的来说原理是一样的）

export default defineConfig({
 plugins: [vue()],//原本有的
 // 设置代理解决跨域请求问题
 devServer: {
  proxy: {
   '/api': {//匹配/api开头的请求
​    target: 'http://127.0.0.1:3000',//转发的目标服务器
​    changeOrigin: true,//允许跨域
​    pathRewrite: {  
        '^/api': ''  
      }//在请求转发前移除/api
   }
  }
 }
})

这段配置的详细解释：

proxy: 在这个上下文中，proxy对象用于定义代理规则。这些规则告诉代理服务器如何转发对特定路径的请求到另一个服务器（即后端服务器）

'/api': 这是一个路径匹配模式。这里的配置意味着，所有以/api开头的请求都将被代理服务器捕获并转发

target: 指定了代理请求的目标地址。在上面的配置中表示：所有被捕获的请求都将被转发到http://127.0.0.1:3000这个地址。这个通常是你的后端服务运行的地址

changeOrigin: 设置为true时，这个选项会告诉代理服务器在转发请求时修改请求的origin头部，以匹配目标URL。这在后端服务需要根据origin头部来验证请求来源时非常有用

rewrite: 这是一个函数，用于在请求被转发之前修改请求的URL路径。在这个例子中，rewrite函数使用正则表达式/^\/api/来匹配所有以/api开头的路径，并使用path.replace(/^\/api/, '')来移除这些路径中的/api部分。这意味着，如果前端应用请求/api/users，那么被转发到后端服务的请求路径将是/users。

步骤二、配置好vite.config.js文件后找到你对axios进行二次封装的文件，将baseURL改为'/api',使前面配置的代理服务器能匹配到请求

import axios from 'axios'//引入axios

// 创建axios实例

const instance = axios.create({

  baseURL: '/api',//配置公共url，在所有实际的请求url前添加'/api'

  timeout: 60000

})

完成前面两个步骤之后你就可以重新向服务端发送请求了

方法二：

如果使用的是express(node.js)创建的服务端可以使用cors中间件来添加CORS支持，首先需要下载cors包

npm install cors

然后在项目的app.js文件里引入cors包

const cors = require('cors')；//引入cors包

app.use(cors());//允许来自任何源的请求

完成以上操作就可以在浏览器页面重新发送请求了

注*：方法一是在项目的前端代码中配置的，而方法二是在项目的服务端代码中进行配置。我们只要使用其中的一种方法就可以完成跨域请求的配置。