node --- 實踐中理解跨域

經常可以見到.說解決跨域只要返回加上"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-Control

在這里插入圖片描述

4.準備代碼

// 1.html
<body><div id="app"></div>
</body><script src="/node_modules/vue/dist/vue.js"></script>
<script src="/node_modules/vue-resource/dist/vue-resource.js"></script>
<script>const 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

可以看到請求數據成功.!

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250814.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250814.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250814.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！