js:json请求和jsonp请求

简介: js:json请求和jsonp请求
请求方式 同源检查 解决方式
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"});
  });
})();

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

相关文章
|
2月前
|
XML JSON 安全
SSM:请求参数与回显&json
本文介绍了请求参数处理、过滤器和拦截器的使用方法。包括如何通过 `@RequestParam` 和 `@ModelAttribute` 绑定请求参数,使用 Lombok 简化实体类开发,实现过滤器处理字符编码,以及配置拦截器进行请求前后的处理。同时,还展示了如何使用 `@ResponseBody` 返回 JSON 数据,并解决了 JSON 编码问题。
|
1月前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
33 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
2月前
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
36 2
Node.js GET/POST请求
|
2月前
|
存储 JSON JavaScript
JavaScript JSON
【10月更文挑战第7天】JSON 是 JavaScript 中非常重要的一个数据格式,它为数据的表示和传输提供了一种简单而有效的方式。掌握 JSON 的使用方法和特点,对于开发高质量的 JavaScript 应用具有重要意义。
|
3月前
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
2月前
|
JSON API 数据格式
postman如何发送json请求其中file字段是一个图片
postman如何发送json请求其中file字段是一个图片
155 4
|
2月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
40 4
|
2月前
|
JSON 前端开发 Java
【Spring】“请求“ 之传递 JSON 数据
【Spring】“请求“ 之传递 JSON 数据
87 2
|
2月前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
95 3
|
3月前
|
JSON API 数据格式
使用Python发送包含复杂JSON结构的POST请求
使用Python发送包含复杂JSON结构的POST请求