一、通过CROS跨域
客户端不需要处理,只是服务器端需要添加一个头部
-
1、服务器端设置
Access-Control-Allow-Originres.set('Access-Control-Allow-Origin', 'http://localhost:3000'); 2、详细代码见01(01-CORS)
二、使用JSONP处理跨域的问题
jsonp实质就是利用回调函数的处理方式,需要服务端配合开发
- 代码见(02-jsonp)
三、使用iframe实现跨域
四、使用http-proxy-middleware中间件代理
-
1、利用
node定义服务层var express = require('express'); var app = express(); var responsePort = 3001; // 请求页面跑在3001端口 // 定义一个返回数据的 app.get('/api', (req, res) => { res.json({ 'info': 'success', 'code': 200, 'data': { 'names': ['张三', '李四', '王五'] } }) }); app.listen(responsePort, function() { console.log('Responser is listening on port ' + responsePort); }); -
2、定义中间件代理到服务层数据
var express = require('express'); var proxy = require('http-proxy-middleware'); var requestPort = 3000; // 请求页面跑在3000端口 var app = express(); app.use(express.static(__dirname)); // 请求这个'api'接口就会代代理到`http://localhost:3001/`服务下 app.use('/api', proxy({ target: 'http://localhost:3001/', changeOrigin: true })); // changeOrigin设置为true，本地会虚拟一个服务端接收你的请求并代你发送该请求 // http://localhost:3000/api --> http://localhost:3001/api app.listen(requestPort, function() { console.log('Requester is listening on port ' + requestPort); }); -
3、前端页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Proxy跨域</title> </head> <body> <h2 style="text-align: center;">通过http-proxy-middleware插件设置代理</h2> <button>点击跨域</button> <p>hello world!</p> <script> var btn = document.getElementsByTagName('button')[0]; var text = document.getElementsByTagName('p')[0]; btn.addEventListener('click', function() { var xhr = new XMLHttpRequest(); var url = '/api'; // 向http://localhost:3000/api发出请求，获取数据 xhr.open('GET', url); xhr.send(null); xhr.onreadystatechange = () => { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 如果请求成功 //text.innerHTML = xhr.response; console.log(xhr.response) } } }) </script> </body> </html> 4、代码见07