ingress 配跨域 methods express解决跨域

转载

jack 2024-06-05 07:27:03

文章标签 ingress 配跨域 methods 前端 node.js json 服务器 文章分类 云原生云计算

第一部分commonJS使用第三方框架

一.托管静态资源（让用户直接访问静态资源）

例如，如上url分别是请求一张图片，一份样式文件，一份js代码。我们实现的web服务器需要能够直接返回这些文件的内容给客户端浏览器。

根目录
├── public
│   ├── css
│   │   └── index.css
│   ├── img
│   │   └── bg.jpeg
│   ├── js
│   │   └── axios.js
│   └── index.html
└── serve.js # 服务器

//1.导入模块
const express = require('express')
//2.创建服务器
let app = express()
//3.设置请求对应的处理函数
app.use(express.static('public'))
//3.开启服务器
app.listen(3000,()=>{
console.log('success')
})

二.get请求（简单键值对）

// (第一步)加载第三方插件：express
const express = require('express')
// (第二步)调用express()
const app = express()
// (第三步)设置请求对应的处理函数
app.get('/', (req, res) => {
  // req:请求过来的数据：获取数据req.query(express提供)
  // get请求可通过url地址后a=1&b=2&c=3发送数据
  console.log(req.query)
  // res响应出去的数据
  res.send({ name: "张三" })
})
// 设置监听
// 8000是端口号：在浏览器上通过ip地址+端口号可以访问
app.listen(8000, () => { console.log(8000) })

三.post请求三种情况

根据请求参数的不同post请求可以分为三种情况

第一种请求参数：content-type为x-www-form-urlencoded（普通键值对）

相对应的中间件：app.use(express.urlencoded());

// 第一步：加载三方文件
const express = require('express')
// 第二步：使用第三方文件
const app = express()

// 1. 使用中间件(post请求：普通键值对)
app.use(express.urlencoded());

// 第三步：设置服务器
app.post('/post', (req, res) => {
  // 如何获取请求端的数据：
  
  // 首先是普通键值对
  console.log(req.body)
  res.send({ name: '我是post响应过去的数据' })
})
// 第四步：
app.listen(3009, () => { console.log('3009') })

第二种请求参数：json

在post传递参数时，如果要传入的参数比较复杂（多级嵌套），则可以使用json格式上传。

第二种请求参数：content-type为JSON（复杂键值对）

相对应的中间件：app.use(express.json());

// 第一步：加载三方文件
const express = require('express')
// 第二步：使用第三方文件
const app = express()

// 1. 使用中间件(post请求：josn键值对)
app.use(express.json());

// 第三步：设置服务器
app.post('/post', (req, res) => {
  // 如何获取请求端的数据：
  console.log(req.body)
  // 
  res.send({ name: '我是post响应过去的数据json' })
})
// 第四步：
app.listen(3009, () => { console.log('3009') })

第三种请求参数：form-data

相对应的中间件：无

post文件上传操作：需要在服务器端额外使用第三方multer这个包（不属于express）来获取上传的信息。Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。

步骤

1.安装包

npm install multer

2.使用

// 第一步：加载三方文件
const express = require('express')

// 1.引入文件上传收集包
const multer = require('multer')
// 2.配置：上传文件会保护这个目录
const upload = multer({ dest: 'uploads/' })
// uploads表示目录名，你也可以设置其他的
// 3. 使用
// 这个路由使用第二个参数 .upload.single表示单文件上传， 
// 'corer' 表示要上传的文件在本次上次数据中的键名。对应于前端页面上的：
//  <input type="file" name='corer'/>

// 第二步：使用第三方文件
const app = express()

// 第三步：设置服务器
app.post('/post', upload.single('corer'), (req, res) => {
  // 如何获取请求端的数据：
  // req.file 记录了文件上传的信息
  // req.body 记录了其它普通参数（非文件）的信息
  console.log(req.body)
  console.log(req.file)
  res.send({ name: '我是post响应过去的数据formdata' })
})
// 第四步：
app.listen(3009, () => { console.log('3009') })

四.RESTful接口

REST（Representational State Transfer）表述性状态转换，REST指的是一组架构约束条件和原则。如果一个架构符合REST的约束条件和原则，我们就称它为RESTful架构。REST本身并没有创造新的技术、组件或服务，而隐藏在RESTful背后的理念就是使用Web的现有特征和能力，更好地使用现有Web标准中的一些准则和约束。

//------------下面是普通的api设计---------------

app.get('/getarticle',(req,res)=>{
    res.send('获取')
})

app.post('/addarticle',(req,res)=>{
    res.send('添加')
})

app.post('/delarticle',(req,res)=>{
    res.send('删除')
})
app.post('/updatearticle',(req,res)=>{
    res.send('编辑')
})

---------------------RESTful接口-----------------

const express = require('express')

const app = express();

app.get('/articles',(req,res)=>{
    res.send('获取')
})

app.post('/articles',(req,res)=>{
    res.send('添加')
})

app.delete('/articles',(req,res)=>{
    res.send('删除')
})
app.put('/articles',(req,res)=>{
    res.send('编辑')
})

app.listen(8080,()=>{
    console.log(8080); 
})

第二部分：es6模块化使用第三方框架（举例）

//导入npm下载好的三方包(es6模块化)
import express from 'express'
const app = express()

app.get('/get', (req, res) => {

  // get请求：获取浏览器发送过来的数据req.query(普通键值对)
  console.log(req.query)

  // 若是跨域请求：服务器响应头设置以下
  res.setHeader("Access-Control-Allow-Origin", "*")

  res.send('请求成功,给予响应')
})

// 设置监听
app.listen(3000, () => { console.log(3000) })

第三部分：解决跨域问题（三种解决方式）

跨域错误:`不同源`的`ajax请求`====> 报跨域的错误

同源与跨域

同源是指：协议相同，域名相同，端口相同 都相同。只要有一个不同就是跨域

ingress 配跨域 methods express解决跨域_json

注意，错误是发生在浏览器端的。请求是可以正常从浏览器发到服务器端，服务器也可以处理请求，只是返回到浏览器端时出错了。

解决方案1：

给响应头添加一个属性 res.setHeader("Access-Control-Allow-Origin", "*")

解决方案2：

如果要发送多个ajax方法1的写法就太麻烦了，这时我们需要下载一个cors三方模块

第一步

npm i cors

第二步

var cors = require('cors')
app.use(cors())
// 之后每个响应头都会被设置

//1.导入模块
const express = require('express')
const { header } = require('express/lib/request')

//2.创建服务器
let app = express()
// 导入一个cors(需要下载：这是给响应头设置res.setHeader("Access-Control-Allow-Origin", "*"))

var cors = require('cors')
app.use(cors())
// 之后每个响应头都会被设置

app.get('/getapi', (req, res) => {

  console.log(req.query)
  // 添加请求头
  // res.setHeader("Access-Control-Allow-Origin", "*")
  res.send({ name: '恭喜您get请求成功' })
})
//3.开启服务器
app.listen(3000, () => {
  console.log('success')
})

解决方案三：jQuery封装的jsonp

（前端使用jQuery ，后端使用nodejs + express。注意前后端都需要改动代码。）

（前端页面：加上dataType属性）

$.ajax({
   type: 'GET',
   url: 'http://localhost:4000/get', 
   success: function (result) {
      console.log(result);
   },
   dataType: 'jsonp' // 必须要指定dataType为jsonp
});

（后端接口：express框架已经提供了一个名为jsonp的方法来处理jsonp请求）

const express = require('express');
const app = express();
app.get('/get', (req, res) => {
  let data = {a:1,b:2}
  // res.json(data)
  res.jsonp(data)
})
app.listen(3000, () => {
  console.log('你可以通过http://localhost:3000来访问...');
});