Vuejs和Nodejs的请求资源上不存在'Access-Control-Allow-Origin‘标头

在使用Vue.js作为前端框架和Node.js作为后端服务器时，可能会遇到跨域资源共享（CORS）问题。浏览器出于安全考虑，实施了同源策略，这意味着默认情况下，浏览器只允许从同一源加载资源。如果你的Vue.js应用尝试从不同的源（域名、协议或端口）访问Node.js服务器上的资源，浏览器会阻止这种请求，除非服务器明确允许这种跨域请求。

Access-Control-Allow-Origin 是一个HTTP响应头，它指示浏览器可以从哪些源加载资源。如果这个头不存在或者不包含请求源，浏览器将阻止请求。

要解决这个问题，你需要在Node.js服务器上设置CORS策略。以下是一些常见的方法：

使用Express.js中间件

如果你使用的是Express.js框架，可以使用cors中间件来轻松设置CORS策略。

首先，安装cors包：

npm install cors

然后，在你的Express应用中使用它：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有源访问资源
app.use(cors());

// 或者，只允许特定的源访问资源
app.use(cors({
origin: 'http://example.com', // 允许的源
methods: ['GET', 'POST'], // 允许的HTTP方法
allowedHeaders: ['Content-Type', 'Authorization'] // 允许的请求头
}));

app.get('/data', (req, res) => {
res.json({ message: 'This is data from the server.' });
});

app.listen(3000, () => {
console.log('Server is running on port 3000');
});

手动设置响应头

如果你不想使用中间件，也可以在每个路由处理函数中手动设置响应头。

app.get('/data', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有源
// 或者
// res.setHeader('Access-Control-Allow-Origin', 'http://example.com'); // 只允许特定源

res.json({ message: 'This is data from the server.' });
});

请注意，将*作为Access-Control-Allow-Origin的值会允许任何源访问资源，这可能会带来安全风险。在生产环境中，你应该指定一个明确的源。

使用HTTP代理

在开发环境中，你还可以使用HTTP代理来解决CORS问题。例如，如果你使用Vue CLI创建的项目，可以在vue.config.js文件中配置代理。

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // Node.js服务器地址
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},
},
};

这样，当你在Vue.js应用中请求/api/data时，它会被代理到http://localhost:3000/api/data，从而绕过浏览器的CORS限制。

确保在生产环境中仔细配置CORS策略，以保护你的应用免受未经授权的访问。