uni-app访问后端跨域问题

Question

使用uni-app开发APP， 向后端发起登录请求时提示跨域，按照网上搜的方法配置之后，请求地址变成浏览器运行的地址了，请问应该怎么修改代码

manifest.json代码：

"devServer": {
            "port": "7000",
            "disableHostCheck": true,
            "proxy": {
                "/api": {
                    "target": "http://192.168.50.73:8080/auth", //代理的接口
                    "changeOrigin": true, //是否跨域
                    "secure": false, // 设置支持https协议的代理
                    "pathRewrite": {
                        "^/api": ""
                    } //如需去掉前缀则加上此配置 
                }
            }
        }

index.vue代码：

uni.request({
                        url: '/api/b/doLogin',
                        method: 'GET',
                        data: loginStr,
                        dataType: "jsonp",
                        header: {
                            'content-type': 'application/json',
                        },
                        success: (res) => {
                            console.log(res)

Answer 1

肌肉达摩 上午好☀️☀️☀️️
本答案参考通义千问

在uni-app中遇到跨域问题，您已经尝试了manifest.json文件中的proxy设置，但请求仍然指向本地开发服务器（http://localhost:7000）。这可能是因为您需要确保后端服务器也支持CORS（跨源资源共享）或者您需要在后端做一些配置来处理跨域请求。

解决方案：

1. 检查后端设置：

   • 确保后端服务器允许从您的开发服务器地址（通常是http://192.168.50.73:8080）发送跨域请求。如果后端是Node.js，可以使用cors库来配置CORS策略。

   const express = require('express');
   const cors = require('cors');
   
   const app = express();
   app.use(cors()); // 添加这个中间件允许跨域
   

2. 更新manifest.json配置：

   • 如果后端服务器支持CORS，您可能不需要设置proxy。您可以直接将url属性指向后端API地址。

   "proxy": {
       "/api": {
           "target": "http://192.168.50.73:8080", // 直接指向后端地址
           "changeOrigin": true,
           "secure": false,
           "pathRewrite": {
               "^/api": ""
           }
       }
   }
   

3. 取消JSONP请求：

   • JSONP不是解决跨域问题的标准方法，uni-app的uni.request应该可以直接发送GET请求到/api/b/doLogin，因为changeOrigin设置为true。如果后端支持标准的CORS，应该不需要JSONP。

4. 在前端代码中调整请求：

   • 将dataType: "jsonp"删除，因为JSONP已被取消。

   uni.request({
       url: '/api/b/doLogin',
       method: 'GET',
       data: loginStr,
       header: {
           'content-type': 'application/json',
       },
       success: (res) => {
           console.log(res)
       },
       fail: (err) => {
           console.error(err)
       }
   })
   

请确保后端和前端都正确配置了跨域策略，如果问题仍然存在，检查后端的CORS设置或者与后端开发人员联系以获取更多帮助。