【跨域請求】【前端】什么是CORS，教你解決跨域問題
2023-03-08 21:57 作者:目標(biāo)力扣Knight | 我要投稿
跨域請求原理模擬以及解決
項目文件結(jié)構(gòu)
?├── bin ?├── index.html ?├── index.js ?├── node_modules ?├── package-lock.json ?├── package.json ?├── public ?├── routes ?└── views
整體思路
90端口是客戶端，91端口是服務(wù)端。在模擬跨域時，使用瀏覽器訪問了90端口，而90端口返回的H5文件中包含了請求91頁面的腳本
此時由于本地IP相同端口不同，發(fā)生了跨域現(xiàn)象；
- 方案一，通過在服務(wù)器端修改響應(yīng)頭實現(xiàn)允許跨域
- 配置js文件
D:\BaiduSyncdisk\Frontend\nodejsPro\index.js
?var express = require('express');
?
?var app = express();
?app.use(express.static(__dirname));
?app.listen(90);
?
?var app2 = express();
?app2.get('/', function(req, res){
??// 1. 修改響應(yīng)頭。是服務(wù)端配置允許同源策略嗎？
??res.header('Access-Control-Allow-Origin', '*');
??res.send("您好");
?})
?app2.listen(91);
- 修改默認(rèn)響應(yīng)頁面的腳本
D:\BaiduSyncdisk\Frontend\nodejsPro\index.html
?<body>
???<h4>Hello everyone!</h4>
???<script>
?????fetch("http://localhost:91/").then(res=>res.text()).then(data=>{alert(data)})
???</script>
?</body>
- 方案二: JSON, 即利用H5中開放策略的
script標(biāo)簽捕獲其他頁面的JS腳本 - H5頁面編寫函數(shù)和跨域腳本
D:\BaiduSyncdisk\Frontend\nodejsPro\index.html
?<!DOCTYPE html>
?<html lang="en">
?<head>
???<meta charset="UTF-8">
???<title>Title</title>
?</head>
?<body>
???<h4>Hello everyone!</h4>
???<script>
?????function f(data) {
???????alert(data);
???????console.log(typeof data);
????}
???</script>
???<script src="http://localhost:91?callback=f"></script>
?</body>
?</html>
- 服務(wù)端定制回調(diào)參數(shù)
D:\BaiduSyncdisk\Frontend\nodejsPro\index.js
?var express = require('express');
?
?// 90端口是客戶端，91端口是服務(wù)端。在模擬跨域時，使用瀏覽器訪問了90端口，而90端口返回的H5文件中包含了請求91頁面的腳本
?// 此時由于本地IP相同端口不同，發(fā)生了跨域現(xiàn)象；
?var app = express();
?app.use(express.static(__dirname));
?app.listen(90);
?
?var app2 = express();
?app2.get('/', function(req, res){
???var funcname = req.query.callback;
???res.send(funcname + "('您好')");
?})
?app2.listen(91);
- 參考與引用
?# 創(chuàng)建NodeJS項目 ?https://www.cnblogs.com/chongsaid/p/nodejs_getStart.html ?# Jsonp定義 ?https://zh.wikipedia.org/wiki/JSONP
- 121
標(biāo)簽：
