跨域,前端

一、跨域问题与解决

  • 在前后端分离开发中,前端页面运行在某个域名(如 `http://localhost:8080`),后端服务运行在另一个域名(如 `http://localhost:3000`)。当前端页面通过 js(如 `axios`)向后端发送请求时,浏览器会执行同源策略,限制跨域请求,从而导致请求失败。
  1. 使用 `koa-cors` 解决跨域问题

```js

app.use(cors());

```

二、前端页面数据加载与渲染

  1. 页面加载事件:绑定 `load`,渲染

```js

window.addEventListener('load', function () {

});

```

(二)请求后端接口

  1. 使用 `axios` 向后端接口发送请求,获取数据库中的数据。

```js

// `url` 是后端服务的地址,例如 `http://localhost:3000`。

axios.get(`${url}/blogs`).then(res => {

// 处理响应数据

});

```

  1. 数据渲染到页面

```js

this.document.querySelector('tbody').innerHTML = arr.map(item => `

<tr>

<td>${item.id}</td>

<td>${item.title}</td>

<td>${item.author}</td>

<td>

<input type="button" value="编辑" οnclick="btnEdit(${item.id})">

<input type="button" value="删除" οnclick="btnDel(${item.id})">

</td>

</tr>

`).join('');

```

相关推荐
亮子AI13 小时前
【NestJS】在 nest.js 项目中,如何使用 Postgresql 来做缓存?
开发语言·缓存·node.js·nest.js
EndingCoder13 小时前
Node.js 数据查询优化技巧
服务器·javascript·数据库·node.js·数据查询优化
芒果Cake13 小时前
【Node.js】Node.js 模块系统
javascript·node.js
_光光15 小时前
大文件上传服务实现(后端篇)
后端·node.js·express
一枚前端小能手15 小时前
🚀 Node.js 25重磅发布!快来看看吧
前端·javascript·node.js
impossible199472715 小时前
如何开发一个自己的包并发布到npm
node.js·1024程序员节
岁月宁静1 天前
用 Node.js 封装豆包语音识别AI模型接口:双向实时流式传输音频和文本
前端·人工智能·node.js
徐sir(徐慧阳)1 天前
搭建属于自己的网站HEXO静态页(二)发布网站到gihub
服务器·node.js·github·hexo
雪中何以赠君别1 天前
【框架】CLI 工具笔记
javascript·node.js
专注VB编程开发20年1 天前
JSA变成类似vba环境给第三方软件集成IDE功能,脚本功能
ide·microsoft·node.js·vba·wps·vb6·jsa