day2.node(接口问题及跨域处理)

以node express-generator为例
//node中在routes模块中创建对应的文件,
var express = require('express');
var router = express.Router();  //固定写法
//根据请求方式对应
router.get('/list', (req, res) => {
      res.json({
   })
}
//暴露出去
module.exports = router;

完成以上步骤, 去app.js中,require并user,前端根据AJAX去寻找相对应的路径请求所需数据。

跨域

一、为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。
二、node中间件代理处理跨域
使用NPM插件:http-proxy-middleware

//引入依赖
var express = require('express')
var proxy = require('http-proxy-middleware')
 
var app = express()
 //来自api的请求进入目标文件 'http://www.example.org'
app.use('/api', proxy({ target: 'http://www.example.org', changeOrigin: true }))
app.listen(3000)

进入network,xhr中找到url,前端通过ajax请求


image.png

注意拿到的resp为字符串,需要转换,这里的url完整就是通过target拼接上后面字段(app.js中就是指来自commonFoot的请求进入target中去拼接上前端url去找)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,827评论 1 45
  • 题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑,只允许与本...
    FLYSASA阅读 1,889评论 0 6
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 1,141评论 0 2
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,414评论 0 6
  • What isBITEX? The need for approachable financial service...
    UKL项目评级阅读 236评论 0 0

友情链接更多精彩内容