1、问题描述：
在本地用express构建服务器端，前端访问数据。
报错：Access to XMLHttpRequest at ‘http://localhost:3001/responseData’ from origin ‘http://127.0.0.1:8848’
（一）app.js
// 引入express
const express = require('express');
// 引入path
const path = require('path');
// 实例化express
const app = express();
// 访问静态资源文件夹
app.use(express.static(path.join(__dirname, 'public')));
// 创建路由，数据请求方式要跟客户端统一
app.get('/first', (req,res)=>{
res.send('hello ajax'); //res: response
});
app.get('/responseData', (req, res)=>{
//res.setHeader("Access-Control-Allow-Origin","*"); //跨域
res.send({"name":"张三"}); //JSON：键值对
});
app.listen(3001);
console.log('3001启动成功');
（二）启动app.js
在app.js目录下，启动命令行窗口
（三）客户端访问
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 创建ajax对象
// XMLHttpRequest：JS中内置的构造函数
var xhr = new XMLHttpRequest();
// 请求方式，get post
// 请求地址，url
xhr.open('get', 'http://localhost:3001/responseData');
// http://poetry.apiopen.top/getTime
// 发送请求
xhr.send();
// 获取服务器端返回的数据：responseText，需要不定长时间等待
xhr.onload = function () {
// console.log(xhr.responseText);
// console.log(typeof xhr.responseText);
var resText = JSON.parse(xhr.responseText);
console.log(resText);
// console.log(typeof resText);
// 字符串拼接
var str = '<h1>'+resText.name+'</h1>';
document.body.innerHTML = str;
}
</script>
</body>
</html>
2、解决方法：
解决跨域：app.js文件中，在数据响应部分，加上：
res.setHeader("Access-Control-Allow-Origin","*");
3、注意
一般前端文件的打开，在启动的服务器端，端口号后面
更多推荐
跨域问题：Access to XMLHttpRequest at ‘http://localhost:3001/re‘ from origin ‘http://
发布评论