生活随笔
收集整理的這篇文章主要介紹了
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
可以看到請求數據成功.!
總結
以上是生活随笔為你收集整理的node --- 实践中理解跨域的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
