为何会产生跨域？如何解决跨域？项目开发中，难免会遇到跨域问题，本文介绍了为何会产生跨域？以及如何解决跨域？对代码配置示例

跨域：是由浏览器的同源策略引起的。

同源（协议、ip、端口）其中任何一个不一样就产生跨域。

同源策略是浏览器的一种安全机制，它限制了从一个源（即协议、域名和端口都相同）加载的文档或脚本与来自不同源的资源进行交互。比如： http://localhost:8080 尝试请求一个不同源的 API： http://localhost:3000/api，浏览器会阻止这种请求，导致跨域问题。

跨域的特点：跨域只存在于浏览器。

文档地址：https://webpack.docschina.org/configuration/dev-server/#devserverproxy

代理配置示例：

// vue.config.js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  /**
   * 配置开发服务器的行为，包括端口、主机、HTTPS 和代理设置
   *  port: 8080 —指的是本地开发电脑的端口号。当在本地开发环境中运行 Vue 项目时，开发服务器会在本地机器上启动，并监听指定的端口（在这个例子中是 8080） 可以通过访问 http://localhost:8080 来查看应用。
   *  host: "0.0.0.0" —表示开发服务器会监听所有可用的网络接口。这意味着可以通过本地机器的任何 IP 地址访问开发服务器。例如，如果电脑在局域网中的 IP 地址是 192.168.1.100，那么可以通过 http://192.168.1.100:8080 来访问应用。使用  0.0.0.0  可以方便地让其他设备（如手机或其他电脑）在同一局域网中访问开发服务器。
   *  https: false  表示开发服务器将使用 HTTP 协议，而不是 HTTPS 协议。使用 HTTPS 的主要区别在于安全性。HTTPS（HTTP Secure）通过加密数据传输来保护用户的信息，防止中间人攻击和数据被窃取。在开发环境中，通常不需要 HTTPS，因为主要是在本地进行开发和调试。但是在生产环境中，强烈建议使用 HTTPS，以确保用户数据的安全。
   *  open: false  表示在运行 npm run serve 后，不会自动打开浏览器。如果将其设置为 true ，那么在启动开发服务器时，浏览器会自动打开并加载应用程序的主页。这在开发过程中可能会很方便，特别是当频繁地重启开发服务器时。
   */
  devServer: {
    port: 8080, // 本地开发服务器的端口号
    host: "0.0.0.0", // 本地开发机器的 IP 地址, 监听所有可用的网络接口
    https: false, // 是否使用安全的 HTTPS 协议
    open: true, // 是否在启动项目后自动打开浏览器
    /**
     * 配置 API 请求的代理，解决开发环境跨域问题:
     *  '/api' : 这个配置项表示前端请求中以  /api 开头的 URL 会被代理到目标服务器。也就是说，当在前端代码中发起请求时，比如  http://localhost:8080/api/userList ，这个请求会被转发。
     *    target : 是代理请求的目标服务器地址。在配置中，target 应该是后端 API 服务器的地址。例如，若后端 API 运行在  http://127.0.0.1:8000 ，那么可以将 target 设置为: target: 'http://127.0.0.1:8000'
     *    changeOrigin: true 用于解决跨域问题，通过修改请求头中的 Origin 字段 （例: 我的 Origin 是  http://localhost:8080），使目标服务器认为请求是来自它自己的地址，从而避免因跨域而导致的请求被拒绝。
     *    pathRewrite: { '^/api': '' } : 这个配置项的作用是重写请求的路径。当请求被代理时， pathRewrite 会将请求路径中的 /api 替换为空字符串。如: http://localhost:8080/api/userList  将被重写为  http://127.0.0.1:3000/userList 。 也就是说, /api 的部分会被去掉。
     */
    proxy: {
      '/api': {
        // 代理请求配置
        target: 'http://127.x.x.x:xxxx', // 目标服务器地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 重写路径，将请求中的 '/api' 替换为空
        }
      },
    }
  },
})

总结

①.在浏览器发请求的时候，把这个请求发给服务器上的这个代理模块；

②.再由这个代理模块转发给我们真正的服务器；

③.原来由浏览器直接发送请求到服务器就转化为服务器到服务器之间的请求通过配置代理，可以有效地解决开发环境中的跨域问题。

前端的跨域配置（如代理）通常只在开发环境中生效。在生产环境中，前端代码会被打包成静态文件，直接部署到服务器上，而不会再通过开发服务器提供服务。

前端配置跨域只能在开发环境生效吗？

是的，前端的跨域配置（如代理）通常只在开发环境中生效。在生产环境中，前端代码会被打包成静态文件，直接部署到服务器上，而不会再通过开发服务器提供服务。

如果生产环境产生跨域，如何解决？

主要是后端解决。虽然前端可以通过代理等方式在开发环境中解决跨域问题，但在生产环境中，后端必须配置 CORS 或其他机制来允许跨域请求。

CORS（跨域资源共享） ：在后端服务器上设置 CORS 头部，允许特定的源进行跨域请求。这个方法需要后端支持。

JSONP：使用 JSONP 技术来进行跨域请求（仅限于 GET 请求），但这种方法现在使用较少。

反向代理：在生产环境中，可以使用 Nginx 等服务器进行反向代理，将请求转发到后端服务。