vue3下的uniapp跨域踩坑

**Vue3下UniApp跨域踩坑**

在开发移动端应用时，尤其是使用Vue3和UniApp框架的项目中，跨域问题经常会出现。跨域问题是指当两个不同源的页面或服务之间进行通信时，浏览器会阻止这种通信，因为安全原因。

本文将详细介绍如何在Vue3下UniApp项目中解决跨域问题。

###1.什么是跨域首先，我们需要了解什么是跨域。跨域指的是当两个不同源的页面或服务之间进行通信时，浏览器会阻止这种通信。

例如，如果我们有一个后端接口` />
###2. 为什么需要解决跨域问题在开发移动端应用时，我们经常需要与后端服务进行交互。例如，我们可能需要从后端获取数据、发送请求等。在这些场景中，如果我们不解决跨域问题，浏览器会阻止通信，这将导致我们的应用无法正常工作。

###3. 解决跨域问题的方法有多种方法可以解决跨域问题。下面是常见的一些方法：

####1. JSONP（JSON with Padding）

JSONP是一种老式的跨域通信方式。它通过在请求中传递一个回调函数，来实现跨域通信。

例如，如果我们需要从` />

javascriptfetch(' {
 method: 'GET',
 headers: {
 'Content-Type': 'application/json'
 },
 mode: 'cors' // 这里是关键，mode设置为cors，可以实现跨域通信})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

javascriptfetch(' {
 method: 'GET',
 headers: {
 'Content-Type': 'application/json'
 },
 mode: 'cors' // 这里是关键，mode设置为cors，可以实现跨域通信})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

javascriptconst proxy = require(' />
module.exports = function(app) {
 app.use('/api', proxy({
 target: ' /> changeOrigin: true,
 pathRewrite: { '^/api': '' }
 }));
};

bashserver {
 listen80;
 server_name example.com;

 location /api {
 proxy_pass  /> proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 }
}