淘先锋技术网

首页 1 2 3 4 5 6 7

跨域是指在同一个域名下的网页获取另一个域名下资源时出现的问题。Node.js通过向客户端返回指定的访问响应头,可以解决Vue与Node.js在不同域名下的跨域问题。

跨域请求是指一个域下的文档或脚本试图去请求另一个域下的资源,如:位于 http://domain-a.com 的网页上使用ajax请求 http://domain-b.com/data.json。目前主流浏览器都采取了同源策略,如浏览器中使用 XMLHttpRequest 或 Fetch 来请求数据时,只能请求当前域名下的数据,不能跨域请求。

跨域请求有多种解决方案,包括JSONP跨域、CORS跨域和前端在本地开发环境使用代理来实现跨域。

但是对于Node.js来说,可以使用一个中间件,如cors来解决Vue和Node.js在不同端口下的跨域请求问题。

const express = require('express');
const cors = require('cors'); 
const app = express();
app.use(cors());
app.get('/api/data', (req, res) =>{
//需要获取的数据
});
app.listen(3000, () =>{
console.log('listening on port 3000');
})

CORS全称Cross-origin resource sharing,即跨源资源共享,它是一种web标准,在浏览器和服务器端对跨域资源访问进行控制。 CORS要求服务器在响应头中添加Access-Control-Allow-Origin字段,这个字段指定了哪些来源可以访问资源。

在response header中添加Access-Control-Allow-Origin字段来设置返回的请求是否可以在不同的域名、端口、和协议下使用。如果需要本站数据只能由本站使用,那么Access-Control-Allow-Origin头部的值就应该设置为当前的站点域名。如果需要开放数据给所有的请求者,那么可以使用通配符*。

app.use((req, res, next) =>{
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourHeaderFeild'); 
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); 
if (req.method == 'OPTIONS') { 
res.send(200);
} else {
next();
}
});

以上代码演示了服务器如何设置响应头来解决跨域问题,由于Vue是以前端框架的方式来使用,在请求的时候需要借助后端提供跨域信息,HTTP协议对跨域请求会进行预检请求,即发出一个OPTIONS请求,来查询服务器是否允许该跨域请求,上述代码的if语句块表示接收跨域请求的类型,如GET、POST、PUT等。

总而言之,跨域是常见的web问题,为了解决Node和Vue在不同域名下的跨域请求问题,我们可以使用CORS中间件来设置服务器响应头部。当然,要在前端进行请求时,也要将请求头信息中的origin设置为服务器所在的域名或ip地址。通过以上设置,我们可以解决Vue和Node.js在不同端口下的跨域请求问题。