如何评价一个企业的网站建设,做网站如何安全 博客,wordpress 怎么安装插件,微网站 开发解决跨域的几种方式 JSONPCORS#xff08;跨域资源共享#xff09;代理 JSONP
利用script标签可以跨域加载资源的特性#xff0c;通过动态创建一个script标签#xff0c;然后将响应数据作为回调函数的参数返回#xff0c;从而实现跨域请求资源。该方式只支持 GET 请求方式… 解决跨域的几种方式 JSONPCORS跨域资源共享代理 JSONP
利用script标签可以跨域加载资源的特性通过动态创建一个script标签然后将响应数据作为回调函数的参数返回从而实现跨域请求资源。该方式只支持 GET 请求方式且不支持发送 POST 等其它请求。
客户端代码
const script document.createElement(script);
script.src http://example.com/data.js?callbackhandleResponse;
document.body.appendChild(script);function handleResponse(data) {console.log(data);
}服务端应返回如下格式的响应数据
handleResponse({ status: ok, data: { foo: bar } });客户端创建一个script标签并添加到 DOM 中指定 src 属性为带有 callback 参数的请求 URL服务端会将响应数据以回调函数的参数形式返回从而实现获取数据的目的。当响应数据返回后客户端自行定义的回调函数会被触发。
CORS跨域资源共享
该方式需要在服务端进行配置通过设置响应头 Access-Control-Allow-Origin 允许跨域访问的来源可以实现跨域请求资源。此方法更为安全且支持所有请求方法。
客户端代码
fetch(http://example.com/data.json, {method: GET,mode: cors,
}).then((response) response.json()).then((data) console.log(data)).catch((error) console.error(error));服务端代码
// 允许指定来源的跨域访问例如允许从http://localhost:8080域名下访问
app.use((req, res, next) {res.setHeader(Access-Control-Allow-Origin, http://localhost:8080);res.setHeader(Access-Control-Allow-Headers, Content-Type);next();
});客户端使用fetch函数发送跨域请求通过设置mode为cors来表明跨域方式。服务端使用 Node.js 的 Express 框架通过设置响应头的Access-Control-Allow-Origin允许从指定来源跨域访问。当服务端成功处理请求并响应数据后客户端通过response.json()将响应体解析为 JSON 格式的数据。
代理
在同源域名下通过服务端代理请求目标网站的资源再将响应结果返回给客户端从而实现跨域访问目标资源。该方式相对复杂但是可以实现所有请求方法。
前端通过代理方式实现跨域可以通过配置一个 Node.js 的 Express 代理服务器然后在前端发送请求时将请求发送至代理服务器代理服务器再将请求转发至目标服务器获取响应后再返回给前端。具体步骤如下
创建一个 Node.js 的 Express 代理服务器。
const express require(express);
const http require(http);
const app express();const PORT 3000;
const TARGET_SERVER http://example.com;// 转发请求到目标服务器
app.use(/, (req, res) {const targetUrl TARGET_SERVER req.url;const proxy http.request(targetUrl, (response) {response.pipe(res);});req.pipe(proxy);
});app.listen(PORT, () {console.log(Proxy server is running on port ${PORT});
});在上面的例子中我们创建了一个代理服务器运行在3000端口上该服务器可以接收任意请求并将请求转发到目标服务器http://example.com上然后将响应返回客户端。
在前端通过代理服务器发送请求
fetch(/api/data).then((response) response.json()).then((data) console.log(data)).catch((error) console.error(error));在前端使用 fetch 函数来发送需要跨域的请求由于代理服务器监听的是 3000 端口所以这里的请求 URL 应该是代理服务器的路径/api/data。
上述方法仅在开发环境下使用而不适合在生产环境中使用因为将会涉及更多的安全问题例如如何保证用户的数据处于安全的状态。
