解决不同localhost间CORS请求405（Method Not Allowed）问题

首先得指出你踩了两个常见的CORS坑，咱们一步步来解决：

1. 别在请求里加Access-Control-Allow-Origin头！ #

你后来在fetch请求里添加的Access-Control-Allow-Origin: *是完全错误的——这个头是服务器返回给浏览器的响应头，用来告诉浏览器“允许哪个域名跨域访问我”，不是客户端发出去的请求头。

当你在请求里加这个自定义头时，浏览器会自动发起一个OPTIONS预检请求，检查服务器是否允许这个自定义头，但你的服务器没配置处理OPTIONS请求，所以直接返回了405（方法不允许），这就是第二个错误的原因。

2. 先确认请求地址是否正确 #

你提到服务器实际运行在:8000端口，但你的请求地址是http://localhost:7000/image.jpg——这大概率是个笔误！先把请求的endpoint改成正确的服务器端口（比如http://localhost:8000/image.jpg），避免因为地址错误白忙活。

3. 正确的客户端fetch代码 #

去掉多余的请求头，同时注意响应流只能被读取一次，所以要克隆响应才能同时缓存和返回：

// 先确保cacheName是已定义的变量，比如const cacheName = 'my-image-cache';
function getData(imageEndpoint) {
  return fetch(imageEndpoint, { mode: 'cors' }) // mode: 'cors'其实是默认值，可以省略
    .then(response => {
      // 先检查响应是否成功
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      return response.clone(); // 克隆响应，因为流只能读取一次
    })
    .then(data => {
      if ('caches' in window) {
        // 缓存操作是异步的，不需要等待它完成再返回数据
        caches.open(cacheName)
          .then(cache => cache.put(imageEndpoint, data));
      }
      return data;
    })
    .catch(e => {
      console.log('请求出错：', e);
    });
}

4. 关键：服务器端必须配置CORS #

CORS的核心是服务器端的配置，浏览器的跨域限制是为了安全，必须服务器允许才行。

举几个常见服务器的配置示例： #

Node.js/Express 用cors中间件

最方便的方式是用官方的cors包：

const express = require('express');
const cors = require('cors');
const app = express();

// 只允许你的前端域名（http://localhost:8080）跨域，生产环境建议用这个
app.use(cors({ origin: 'http://localhost:8080' }));

// 开发环境可以允许所有域名（不建议生产用）
// app.use(cors());

// 托管静态资源（比如图片放在public文件夹下）
app.use(express.static('public'));

app.listen(8000, () => {
  console.log('服务器运行在8000端口');
});

Nginx 配置

如果是Nginx托管静态资源，在配置里添加：

location / {
  # 允许前端8080跨域
  add_header Access-Control-Allow-Origin http://localhost:8080;
  # 允许的请求方法
  add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
  # 允许的请求头（如果有自定义头的话）
  add_header Access-Control-Allow-Headers Content-Type;

  # 处理OPTIONS预检请求，直接返回204
  if ($request_method = OPTIONS) {
    return 204;
  }
}

5. 无法修改服务器？用开发代理绕过 #

如果你没有服务器的修改权限，可以在前端开发服务器里配置反向代理，把跨域请求转发到目标服务器，这样浏览器会认为是同域请求，就不会触发CORS限制。

比如Webpack Dev Server的代理配置：

// webpack.config.js
module.exports = {
  // ...其他配置
  devServer: {
    proxy: {
      // 把请求/image.jpg转发到http://localhost:8000/image.jpg
      '/image.jpg': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
};

然后前端请求的时候直接写getData('/image.jpg')就行，不用写完整的跨域地址。

内容的提问来源于stack exchange，提问作者volna