js中如何解决跨域

在 JavaScript 中解决跨域问题可以通过以下方法:

1. JSONP(JSON with Padding): JSONP 是一种利用 <script> 标签可以跨域加载资源的特性来实现跨域请求的方法。服务器返回的数据需要包装在一个函数调用中，并通过一个回调函数来处理返回的数据。

示例代码：

function handleResponse(data) {
  // 处理返回的数据
}

var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);

1. CORS(Cross-Origin Resource Sharing): CORS 是一种在服务器端实现的跨域请求的方法。需要在服务器端设置响应头来允许跨域请求。

示例代码：

客户端代码：

fetch('http://example.com/api', {
  method: 'GET',
  mode: 'cors'
})
.then(response => {
  // 处理返回的数据
})
.catch(error => {
  // 处理错误
});

服务器端代码（Node.js）：

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

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/api', (req, res) => {
  // 返回数据
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

1. 代理服务器：可以通过搭建一个代理服务器来转发跨域请求。将客户端的请求发送到代理服务器，再由代理服务器发送请求到目标服务器，然后将目标服务器的响应返回给客户端。

示例代码：

fetch('/proxy/api', {
  method: 'GET'
})
.then(response => {
  // 处理返回的数据
})
.catch(error => {
  // 处理错误
});

代理服务器代码（Node.js）：

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

app.use('/proxy', (req, res) => {
  const url = 'http://example.com' + req.originalUrl;
  req.pipe(request(url)).pipe(res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

以上是三种常见的解决跨域问题的方法，具体使用哪种方法取决于你的需求和服务器端是否支持。