网站推广官方平台,悦阁网站建设,帮人做淘宝美工的网站,网站建设买阿里云云服务器经常可以见到.说解决跨域只要返回加上Access-Control-Allow-Origin头部就行… 下面从实践中一步一步的理解. 1.环境准备:
1. node.js (http://nodejs.cn/) 自行下载配置, 完毕后(cmd)输入 node --version 若显示版本号则代表成功// ps: node(中的npm)方便下载资源…经常可以见到.说解决跨域只要返回加上Access-Control-Allow-Origin头部就行… 下面从实践中一步一步的理解. 1.环境准备:
1. node.js (http://nodejs.cn/) 自行下载配置, 完毕后(cmd)输入 node --version 若显示版本号则代表成功// ps: node(中的npm)方便下载资源,node用于构建一个简单的服务器2.新建文件结构如下: 3.资源准备
npm init -y // 快速建立一个包管理文件npm install --save-dev vue vue-resource // 下载vue 和 vue-resource 并将依赖说明添加置 pacage.json (方便版本管理)// ps命令行的根目录为 Access-Control4.准备代码
// 1.html
bodydiv idapp/div
/bodyscript src/node_modules/vue/dist/vue.js/script
script src/node_modules/vue-resource/dist/vue-resource.js/script
scriptconst vt new Vue({el: #app,created() {this.getData();},methods: {getData() {const url http://127.0.0.1:3000/getData;this.$http.get(url).then((res) {var res res.body;console.log(res);})}},})
/script // 说明:
// 1.欢迎留言指出
// 2.created()是vue的生命周期函数中的第2个,此时,页面中的数据和方法全部准备好,因此可以在这里调用下面的getData()方法// 1.js
const http require(http);
const url require(url);const server http.createServer();server.on(request, function(req, res) {let { pathname } url.parse(req.url, true);if (pathname /getData) {let data JSON.stringify({isSuccess: true,msg: [{name: 栗子,age: 18}]})res.end(data);}})server.listen(3000, function() {console.log(server is running at http://127.0.0.1:3000 !);
})5.使用node运行服务器监听请求 打开html页面, 可以很明显的看到,页面运行的端口是5500,而数据是在3000端口.因此产生了跨域。 下面使用面向百度编程提供的解决跨域的方法:
// 1.js
// 在res.end之前加上一句话
res.setHeader(Access-Control-Allow-Origin, *);重启服务器. Ctrl C 退出当前执行环境. 然后执行 node 1.js 可以看到请求数据成功.!
