📌  相关文章
📜  角cors问题 - Javascript(1)

📅  最后修改于: 2023-12-03 14:57:22.455000             🧑  作者: Mango

什么是角CORS问题？

CORS，即跨源资源共享，是一种将跨域请求的数据共享到其他来源的技术。然而，有些请求被浏览器的同源策略禁止，这就是角CORS问题。

角CORS问题指的是，在角（或相同的域）命名空间下，发送跨源请求时受到了同源策略的限制。

这是因为浏览器默认情况下只允许客户端从同一来源（协议，域名和端口）发出请求。这意味着，如果我们尝试从与应用程序不同的 URL 访问 API 或其他资源，就会遇到CORS问题。

如何解决角CORS问题？

有几种方法可以解决CORS问题：

1.使用代理

使用代理服务可以绕过CORS限制，将请求从前端发送到后端，然后在后端进行请求。这种方法需要一个中间服务器，将前端（Angular，React等）和 API服务器（node.js，.NET等）之间包装起来。

代码片段

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

app.use(express.json());

app.use('/', (req, res) => {
  const url = 'https://api.somesite.com' + req.url;
  req.pipe(request(url)).pipe(res);
});

app.listen(3000, () => {
  console.log('Server started...');
});
2.使用JSONP

JSONP是由Script标签引入的JavaScript代码，允许一个页面从不同的源获取并处理数据。虽然不是正式的XHR请求，但它在早期的Web应用程序中得到了广泛使用。

代码片段

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JSONP Example</title>
  </head>
  <body>
    <div id="result"></div>
    <script>
      function callback(response) {
        document.getElementById('result').innerHTML = response.data;
      }

      const script = document.createElement('script');
      script.src = 'https://api.somesite.com/data?callback=callback';
      document.getElementsByTagName('head')[0].appendChild(script);
    </script>
  </body>
</html>
3.在服务器端启用CORS

在服务器端启用CORS是一个有效的解决方案，在服务器端解决CORS问题可以确保所有客户端都从相同的支持请求中受益，而不单个客户端。CORS通过向响应标头添加特定的标头来启用，指示浏览器允许来自不同源的请求。

代码片段

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

app.use(express.json());

app.use('/', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Methods',
    'GET, POST, PUT, DELETE, PATCH, OPTIONS',
  );
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept',
  );
  next();
});

// REST API
app.get('/api/data', (req, res) => {
  // handle request here...
  res.json({ data: 'some data' });
});

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

以上三种方法都可以解决角CORS问题。使用代理和启用CORS是最常用的方法。 JSONP在某些情况下仍然很有用。但是，需要特别小心，因为JSONP的安全性受到限制，容易受到JSON注入攻击的威胁。