前端Axios 与 后端 nodejs 跨域请求交互_node和axios交互

前端Axios 与 后端 nodejs 跨域请求交互

前端部分

// 将需要传的参数，添加到Formdata中
const params = new FormData()
params.append('user', 'root')
params.append('password' '1234')

// httpMethod 包括 GET POST PUT DELETE 等常见 http 方法
axios.httpMethod(url,  {
	params,
	// 请求时携带 (服务端cookie),
	// 客户端无法通过 js 获取或设置
	withCridential: true
})
1
2
3
4
5
6
7
8
9
10
11
12

后端部分

const express = require('express')
const app = express()

app.all(*, (req, res, next) => {
	// 允许跨域的白名单, 跨域时会报错 ，* 代表任意域
	res.header('Access-Control-Allow-Origin', '*')
	// 允许携带Cookie, 不设置的时候， 跨域时会报错
	res.header('Access-Control-Allow-Credentials', 'true')
	// 允许跨域的方法
	res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS') 
	// 设置允许跨域的请求头
	// res.header("Access-Control-Allow-Headers", "X-Requested-With")
	// 设置响应编码
	res.header("Content-Type", "application/json;charset=utf-8")
	next() // 继续下一个中间件
})

app.get('/', (req, res) => {
	res.json({
		"code": 200,
		"message": "success",
		"data": { ... }
	})
})
app.listen(9413, () => {
	console.log('your app is running at http://127.0.0.1:3000')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27