vue3引入cdn报跨域错误

《vue3引入cdn报跨域错误》

解决方案

当在Vue 3项目中通过CDN引入资源遇到跨域错误时，最直接的解决方案是调整服务器端的CORS（跨源资源共享）策略。在前端也可以采用一些手段来规避问题，例如使用代理服务器或者对请求进行特殊处理。

一、服务器端配置CORS

如果是由服务器端导致的跨域问题，可以在服务器端设置允许跨域访问。以常见的Node.js + Express为例：
```javascript
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
origin: function (origin, callback) {
// 允许特定来源的请求，也可以设置为'*'允许所有来源
if (!origin) return callback(null, true);
if (['http://example1.com', 'http://example2.com'].indexOf(origin) !== -1) {
return callback(null, true);
} else {
return callback(new Error('Not allowed by CORS'));
}
},
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type', 'Authorization']
}));

// 然后定义路由等其他逻辑
app.get('/data', (req, res) => {
res.json({ message: 'Hello World!' });
});

app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
对于其他类型的服务器（如Apache、Nginx等），也有相应的CORS配置方法。

二、前端使用代理服务器

如果无法修改服务器端代码，可以考虑在前端构建工具（如Webpack）中配置代理。如果是使用Vite构建Vue 3项目的话：
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://target-server.com', // 目标服务器地址
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, '')
}
}
}
});
``这样当我们在前端发送/api/data`这样的请求时，它会被代理到目标服务器的对应路径，并且避免了跨域问题。