js:json请求和jsonp请求

举报
彭世瑜 发表于 2022/09/25 06:58:29 2022/09/25
【摘要】 请求方式同源检查解决方式json是服务端支持jsonp否不需要服务端支持 目录 一、使用json请求1.1 未开启跨域1.2 开启跨域 二、使用jsonp 一、使用json请求 ...
请求方式 同源检查 解决方式
json 服务端支持
jsonp 不需要服务端支持

一、使用json请求

1.1 未开启跨域

安装依赖

$ pnpm i express

服务端代码

// server.js
const express = require("express");

const app = express();

// 返回json数据
app.get("/api/json", (request, response) => {
  response.json({ msg: "ok" });
});

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server runing on http://127.0.0.1:${port}`);
});

启动服务端

$ node server.js
Server runing on http://127.0.0.1:5000

客户端依赖

$ pnpm i http-server

# 启动静态服务器
$ npx http-server -p 5500 -c-1

此时,后端服务器运行在5000 端口,前端静态服务器在运行在5500 端口

出现了跨域问题

前端访问地址:http://127.0.0.1:5500/index.html

接口地址:http://127.0.0.1:5000/api/json

发送json 请求

// script.js
fetch("http://127.0.0.1:5000/api/json")
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        console.log(data);
      });

直接显示跨域错误

Access to fetch at 'http://127.0.0.1:5000/api/json' 
from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

1.2 开启跨域

安装依赖

$ pnpm i cors

服务端代码

// server.js
const express = require("express");
var cors = require('cors')

const app = express();

// 开启跨域
app.use(cors())

// 返回json数据
app.get("/api/json", (request, response) => {
  response.json({ msg: "ok" });
});

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server runing on http://127.0.0.1:${port}`);
});

重启服务后,前端可以正常获取接口数据

二、使用jsonp

服务端代码

// server.js
const express = require("express");
// var cors = require('cors')

const app = express();

// 开启跨域
// app.use(cors())

// 返回json数据
app.get("/api/json", (request, response) => {
  response.json({ msg: "ok" });
});

// 返回jsonp数据
app.get("/api/jsonp", (request, response) => {
    response.jsonp({ msg: "ok" });
  });

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server runing on http://127.0.0.1:${port}`);
});

前端代码

// 动态导入script
function importScript(src) {
  var hm = document.createElement("script");
  hm.src = src;
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
}

// 全局的响应处理函数
function handleResponse(res) {
  console.log(res);
}

(function () {
  sendJsonpBtn.addEventListener("click", function () {
    importScript("http://127.0.0.1:5000/api/jsonp?callback=handleResponse");
    // jsonp的响应
    // /**/ typeof handleResponse === 'function' && handleResponse({"msg":"ok"});
  });
})();

不需要开启跨域就可以直接获取到数据了

参考
一分钟说完JSONP请求,面试满分答案ヾ(≧▽≦*)o

文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。

原文链接:pengshiyu.blog.csdn.net/article/details/126948915

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。