nextjs前端开发环境解决跨域访问

在做人只因交互的时候需要向nivo组件提供一个比较大的features数组来渲染地图，一开始想要直接本地加一个文件去读取，结果发现浏览器读取文件还比较麻烦，于是转而扔到云上希望直接fetch，结果就遇到了跨域访问限制

什么是跨域访问，问什么浏览器中要限制跨域访问？

跨域访问是指请求一个与自身资源不同源（不同的域名、协议或端口）的资源。 不同源可以是不同的域名、协议或端口。 浏览器出于安全考虑设置了同源策略，限制了从脚本内发起跨域请求。 但在实际应用中，经常会发生跨域访问。

跨域访问限制主要是为了应对跨站点脚本攻击（Cross-Site Scripting, XSS）和跨站请求伪造（Cross-Site Request Forgery, CSRF）这两类安全隐患。

  1. 跨站点脚本攻击（XSS）：XSS 攻击是指攻击者向网页注入恶意脚本代码，当用户访问包含这些恶意脚本的网页时，攻击者可以利用这些脚本获取用户的敏感信息、篡改页面内容或进行其他恶意行为。跨域访问限制可以防止恶意脚本从一个域名加载到另一个域名，并阻止该脚本对其他域名的操作。
  2. 跨站请求伪造（CSRF）：CSRF 攻击是指攻击者利用用户已经通过身份验证的会话执行非预期的操作，通过欺骗用户的浏览器发送恶意请求，从而执行攻击者指定的操作，如更改密码、发表评论等。跨域访问限制可以防止第三方网站在用户不知情的情况下发送请求到目标网站，从而减少 CSRF 攻击的风险。

在开发中解决无法进行跨域访问

在开发环境中，前端运行在localhost:3000上，但是资源在网络上，这时进行请求往往会得到跨域错误

为了避免跨域错误，我们可以配置一个转发规则，让localhost为我们转发到目标网站

在next.config中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const nextConfig = {
    reactStrictMode: true,
    transpilePackages: ["@nivo"],
    experimental: { esmExternals: "loose", },
    async rewrites() {
        return [
            {
              source: '/files/:path*', // 匹配所有以 /files 开头的路径
              destination: 'https://files.lsmcloud.top/:path*', // 代理到的目标地址
            },
          ];
    },
}

module.exports = nextConfig

这样当我们的项目运行时，电脑就会为我们起一个代理，具体使用的时候只需要

1
fetch(/files/目标文件)

localhost就会帮助我们转发到files.lsmcloud.top了

值得注意的是之前我写成http://files.lsmcloud.top/:path*没有成功，会返回521代码，我的站点是cloudflare代理并且配置了强制使用https协议，浏览器这样是可以正常访问的，但是不知道为啥在转发的时候就521了