第八章 跨域问题
现在的web项目一般都是前后端分离的，前后端分离的项目就会面对一个跨域问题，比如说，前端向服务端发送请求的时候，域名地址是不一样的。前端就会因跨域问题请求失败。
举个例子，现在我们的服务端就是不支持跨域的服务端，我写一个简单的前端页面，来向服务端请求数据。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 使用fetch方法发送http get请求，向api /api/books请求数据
fetch('http://localhost:3000/api/books')
.then(res => res.json())
// 将结果打印出来
.then(res => console.log(res))
</script>
</body>
</html>
将index.html文件在浏览器中打开，并打开浏览器的调试栏
tips：chrome浏览器调试栏的打开方式为：右键 -- 检查
图片
可以看到右边调试栏中显示了
Access to fetch at 'http://localhost:3000/api/book/search' from origin 'null' 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.
等内容，说明由于跨域，数据请求失败。
我们回到服务端，解决跨域问题需要一个包 koa-cors 的支持，我们先安装它。
npm install koa-cors --save
然后在在入口文件使用它
const Koa = require('koa');
const app = new Koa();
const bodyParser = require('koa-bodyparser');
// 引用cors包
const cors = require('koa-cors');
const router = require('./router');
const { mongoConfig } = require('./config');
const mongoose = require('mongoose');
mongoose.connect(`mongodb://${mongoConfig.username? mongoConfig.username + ':' + mongoConfig.password + '@': ''}${mongoConfig.host}:${mongoConfig.port}/${mongoConfig.database}`, { useNewUrlParser: true });
app
.use(bodyParser())
// 使用cors支持跨域
.use(cors())
.use(router.routes())
.use(router.allowedMethods())
app.listen(3000);
console.log('Web server run on port 3000');
重新启动项目
node src/server.js
刚才的案例前端文件刷新再次请求数据
图片
可以看到，我们想要的数据已经请求成功并打印出来了。
本文已完成电子书《Node零基础入门到服务端程序》电子书（含教程内项目代码）/ 10元，购买链接：https://mianbaoduo.com/o/bread/mbd-Z5WZk5o=
ps：前九章（本书共计十三章）内容会在这里陆续更新。
网友评论