快速解决跨域请求问题:jsonp和CORS

跨域请求问题是指在一个域名下的网页请求另一个域名下的资源时，由于浏览器的同源策略限制，导致请求失败的问题。为了解决这个问题，常用的方法有跨域资源共享（CORS）和jsonp。

CORS(Cross-Origin Resource Sharing)方法

CORS是一个W3C标准，全称为跨源资源共享。通过在服务器端设置响应头来实现跨域请求的授权。

支持CORS的浏览器会在发送跨域请求时，携带一个额外的请求头部分：Origin，表示这个请求是从哪个源（协议+域名+端口）发起的。
服务器端会响应一个Access-Control-Allow-Origin 头部信息，如果这个响应头部信息的值，包含了发起请求的源，那么此请求将被浏览器允许。

示例：在express框架中，如何设置允许跨域访问？

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/data', (req, res) => {
  res.send('Hello, World!');
});

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

在这个例子中，我们通过设置res.header('Access-Control-Allow-Origin', '*')来允许任何来源的请求访问我们的服务器上的数据。通常情况下，我们需要更加精确地指定可以访问我们的服务器的源。

JSONP(JSON with Padding)方法

jsonp是一种跨域请求方式，利用了script标签没有跨域限制的特性，该方法能够实现跨域请求数据，但是只支持GET请求，不支持POST等其它类型的HTTP请求。

使用jsonp，在网页中创建一个script标签，将需要请求的数据放在script标签的src属性中，服务器端可以返回一段javascript程序，这段程序就是jsonp数据。

示例：在jQuery中使用jsonp请求百度搜索数据

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSONP Demo</title>
</head>
<body>
  <form id="searchForm">
    <label for="query">Search:</label>
    <input type="text" id="query" name="query" size="40" />
    <input type="submit" value="Search" />
  </form>

  <ul id="results"></ul>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="main.js"></script>

</body>
</html>

JS部分：

const searchURL = 'http://suggest.baidu.com/su?wd=';

$('#searchForm').submit(e => {
  e.preventDefault();

  let query = $('#query').val();
  let url = searchURL + encodeURIComponent(query);

  // 使用jsonp进行跨域请求
  $.jsonp({
    url: url,
    callback: 'cb', // 要求服务器使用这个回调函数包装返回数据
    success: data => {
      let results = data.s;
      let html = '';

      results.forEach(result => {
        html += `<li>${result}</li>`;
      });

      $('#results').html(html);
    }
  });
});

在这个例子中，我们使用了jquery-jsonp插件，通过 $.jsonp()方法创建了一个JSONP请求，我们指定了要请求的url，以及要使用的回调函数的名字‘cb’。服务器返回的数据会自动执行这个名为‘cb’的回调函数。

以上就是跨域请求的两种方法：CORS和JSONP的完整攻略说明。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：快速解决跨域请求问题:jsonp和CORS - Python技术站

快速解决跨域请求问题:jsonp和CORS

CORS(Cross-Origin Resource Sharing)方法

JSONP(JSON with Padding)方法

相关文章