【AJAX】axios fetch 跨域

在前端开发中，我们经常需要从不同的域名（即跨域）请求资源。这种请求由于浏览器的同源策略限制，直接请求可能会遇到问题。但是，我们可以使用一些技术或库（如CORS、JSONP、代理服务器等）绕过这些限制。

在这里，我们将讨论如何使用axios和fetch来解决跨域问题。

1. 使用axios解决跨域问题

axios是一个基于promise的HTTP库，它可以运行在浏览器端和node.js中。

在浏览器端，我们可以使用axios发送跨域请求，但是需要服务器支持CORS。

示例代码：

axios.get('http://example.com/api').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.log(error);
});

2. 使用fetch解决跨域问题

fetch API是现代浏览器中的一个新特性，它基于promise设计，用于获取资源（包括跨域资源）。

示例代码：

fetch('http://example.com/api').then((response) => {
  return response.json();
}).then((data) => {
  console.log(data);
}).catch((error) => {
  console.log(error);
});

注意：以上代码只是示例，实际使用时需要根据具体情况进行调整。例如，你可能需要在请求中添加更多的headers，或者处理更复杂的响应。

另外，如果你需要在前端直接解决跨域问题，可以考虑使用代理服务器将请求代理到目标域名，然后由代理服务器转发请求并返回结果。这种方式对开发者来说较为简单，但是需要在开发环境中配置代理服务器。