跨域解决方案实践：CORS 及 JSONP

在前端开发中，经常会遇到跨域问题。跨域指的是通过 AJAX 或者 Fetch 等方式请求非本域下的资源，这种情况下浏览器会阻止请求，以保证用户数据的安全性。为了解决跨域问题，我们可以使用 CORS 和 JSONP 这两种方案。

CORS（跨域资源共享）

CORS 是一种现代化的跨域解决方案，它允许浏览器向不同域名的服务器发出 XMLHttpRequest 请求，从而实现跨域通信。

客户端代码示例

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

服务端代码示例

在服务端，我们需要设置 Access-Control-Allow-Origin 响应头来允许特定域名的请求。

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://www.example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/data', (req, res) => {
  const data = { message: 'Hello, world!' };
  res.json(data);
});

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

JSONP（JSON with Padding）

JSONP 是一种传统的跨域解决方案，它利用 script 标签可以跨域获取资源的特性，通过动态生成 script 标签来实现跨域通信。

客户端代码示例

// javascriptcn.com 代码示例
function jsonp(url, callback) {
  const callbackName = 'jsonp_callback_' + new Date().getTime();
  const script = document.createElement('script');
  script.src = url + '?callback=' + callbackName;
  document.body.appendChild(script);
  window[callbackName] = function (data) {
    delete window[callbackName];
    document.body.removeChild(script);
    callback(data);
  }
}

jsonp('https://api.example.com/data', (data) => {
  console.log(data);
});

服务端代码示例

在服务端，我们需要根据请求参数 callback 的值来返回 JSON 数据。

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/data', (req, res) => {
  const callback = req.query.callback;
  const data = { message: 'Hello, world!' };
  res.send(callback + '(' + JSON.stringify(data) + ')');
});

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

总结

CORS 和 JSONP 都是常见的跨域解决方案。CORS 是一种现代化的解决方案，可以通过设置响应头来允许跨域请求。JSONP 则是一种传统的解决方案，利用 script 标签可以跨域获取资源的特性来实现跨域通信。在实际开发中，我们应该根据具体情况选择合适的跨域解决方案。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35178