前端调用后端接口返回404，居然是跨域了！

相信很多前端开发人员都遇到过这样的问题：在前端调用后端接口时，明明接口文档中写得清清楚楚，但就是返回404错误。这个错误通常是由于跨域问题引起的。

跨域是指浏览器限制从一个源发起的脚本试图读取从另一个源加载的资源。在前端开发中，我们通常使用Ajax技术来调用后端接口。Ajax请求是跨域请求，因此如果后端接口没有配置跨域支持，那么浏览器就会阻止前端脚本访问该接口，并返回404错误。

为了解决跨域问题，我们需要在后端接口上配置跨域支持。有两种常用的方法：CORS和JSONP。

CORS （Cross-Origin Resource Sharing）是一种W3C标准，它允许浏览器跨域请求资源。要启用CORS，需要在后端接口的响应头中添加以下字段：

Access-Control-Allow-Origin: *

这个字段表示允许所有来源的脚本访问该接口。如果只想允许特定来源的脚本访问该接口，则可以将这个字段的值设置为该来源的URL。

JSONP （JSON with Padding）是一种非标准的跨域解决方案。它利用了script标签可以跨域加载资源的特性。要使用JSONP，我们需要在前端脚本中创建一个script标签，并将其src属性设置为后端接口的URL。后端接口需要返回一个JSONP响应，即在一个函数调用中包装JSON数据。

function callback(data) {
  // 处理数据
}

<script src="http://example.com/api/data?callback=callback"></script>

这种方法虽然简单，但存在一些安全隐患。因此，建议使用CORS来解决跨域问题。

现在，我们再来看看本文开头提到的那个问题。为什么在浏览器中直接打开接口是可行的，但在前端脚本中调用该接口却返回404错误呢？这是因为浏览器在直接打开接口时，会自动发送一个OPTIONS请求，以检查该接口是否支持跨域。如果接口支持跨域，那么浏览器就会允许前端脚本访问该接口。然而，在前端脚本中调用该接口时，浏览器不会自动发送OPTIONS请求。因此，如果接口没有配置跨域支持，那么浏览器就会阻止前端脚本访问该接口，并返回404错误。

为了解决这个问题，我们需要在前端脚本中手动发送OPTIONS请求，以检查该接口是否支持跨域。我们可以使用Axios或Fetch等库来发送OPTIONS请求。

// 使用Axios
axios.options('/api/data')
  .then((response) => {
    // 接口支持跨域
  })
  .catch((error) => {
    // 接口不支持跨域
  });

// 使用Fetch
fetch('/api/data', {
  method: 'OPTIONS'
})
  .then((response) => {
    // 接口支持跨域
  })
  .catch((error) => {
    // 接口不支持跨域
  });

如果接口支持跨域，那么我们就可以在前端脚本中正常调用该接口了。