跨域问题的解决

最新推荐文章于 2024-04-04 16:51:33 发布

RT_wqt

最新推荐文章于 2024-04-04 16:51:33 发布

阅读量272

点赞数

分类专栏： node 文章标签： ajax跨域问题

本文链接：https://blog.csdn.net/weixin_43916777/article/details/111599780

版权

node 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

跨域问题

因浏览器提供的安全机制，两个不同源的客户端、服务端的交互可能会产生跨域问题（即协议、域名、端口有一个不同就会引起）。

在这里插入图片描述

demo.html为资源请求方。
server.js为资源提供方。
以上图片，已经以JSONP的方式解决了跨域问题。

在这里插入图片描述

跨域问题的解决

CORS：只需在服务端的响应头设置’Access-Control-Allow-Origin’:’*’ 就行，即允许所有地址访问服务端资源。

JSONP：script元素本身是不受同源策略的制约的。那么可以以JSONP的方式解决。什么是JSONP？就是将JSON数据封装在函数里返回给前端调用执行。

JSONP解决方式代码（Node.js）

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let jsonpcallback;
    const url='http://localhost:3000/data';
    function getJSONP(url, callback) {
      url+='?callback=jsonpcallback';
      let script = document.createElement('script');
      script.type='text/javascript';
      script.src = url;
      document.body.appendChild(script);
      jsonpcallback =function(response) {
        try {
          callback(response);
        } finally {
          script.parentNode.removeChild(script);
        }
      }
    }
    getJSONP(url,function(response){
      console.log(response);
    });
  </script>
</body>
</html>

服务端代码

const http = require('http');
const { rawListeners } = require('process');
const qs = require('querystring');
http.createServer(function (req, res) {
  if ('/data' === req.url.substr(0,5)) {
    let post = {
      result: '成功',
      name:'lihua'
    }
    res.writeHead(200, {
      'Content-Type': 'text/javascript',
      // 'Access-Control-Allow-Origin':'*'
    });
    let obj = req.url.substr(req.url.indexOf('?') + 1).split('=');
    console.log(obj[1] + '(' + JSON.stringify(post) + ')');
    res.end(obj[1] + '(' + JSON.stringify(post) + ')');
  } else {
    res.writeHead(404, {
      'Context-Type': 'text/plain'
    });
    res.end('404\n页面不存在');
  }
}).listen(3000);