uniapp跨域问题解决办法

怼烎@ 2024-03-22 16:43 17阅读 0赞

## uniapp跨域问题解决办法 ##

简介：本文讲解如何解决uniapp和springboot结合时候的的跨域问题。

### 对于uniapp ###

编辑manifest.json文件  
![在这里插入图片描述][b08faef573ee47d38e227c2097a2bc10.png]  
在最后面加上这段代码

"h5" : {
        
      		    "devServer" : {
        
      		         "port" : 8080, //浏览器运行端口
      		          "disableHostCheck" : true, //设置跳过host检查
      		          "proxy" : {
        
      		              "/api" : {
        
      		                  "target" : "http://localhost:8081", //目标接口域名
      		                   "changeOrigin" : true,  //是否跨域
      		                   "secure" : false,  // 设置支持https协议的代理
      											 "pathRewrite":{
        "^/api":""}
      		             }
      		        }
      		    }
      		}

完整的是这个样子的

{
        
      "name": "LoginAndRegister",
      "appid" : "",
      "description" : "",
      "versionName" : "1.0.0",
      "versionCode" : "100",
      "transformPx" : false,
      /* 5+App特有相关 */
      "app-plus" : {
        
          "usingComponents" : true,
          "nvueStyleCompiler" : "uni-app",
          "compilerVersion" : 3,
          "splashscreen" : {
        
              "alwaysShowBeforeRender" : true,
              "waiting" : true,
              "autoclose" : true,
              "delay" : 0
          },
          /* 模块配置 */
          "modules" : {
        },
          /* 应用发布信息 */
          "distribute" : {
        
              /* android打包配置 */
              "android" : {
        
                  "permissions" : [
                      "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                      "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                      "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                      "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                      "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                      "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                      "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                      "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                      "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                      "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                      "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                      "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                      "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                      "<uses-feature android:name=\"android.hardware.camera\"/>",
                      "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                  ]
              },
              /* ios打包配置 */
              "ios" : {
        },
              /* SDK配置 */
              "sdkConfigs" : {
        }
          }
      },
      /* 快应用特有相关 */
      "quickapp" : {
        },
      /* 小程序特有相关 */
      "mp-weixin" : {
        
          "appid" : "",
          "setting" : {
        
              "urlCheck" : false
          },
          "usingComponents" : true
      },
      "mp-alipay" : {
        
          "usingComponents" : true
      },
      "mp-baidu" : {
        
          "usingComponents" : true
      },
      "mp-toutiao" : {
        
          "usingComponents" : true
      },
      "uniStatistics" : {
        
          "enable" : false
      },
      "vueVersion" : "2",
      		"h5" : {
        
      		    "devServer" : {
        
      		         "port" : 8080, //浏览器运行端口
      		          "disableHostCheck" : true, //设置跳过host检查
      		          "proxy" : {
        
      		              "/api" : {
        
      		                  "target" : "http://localhost:8081", //目标接口域名
      		                   "changeOrigin" : true,  //是否跨域
      		                   "secure" : false,  // 设置支持https协议的代理
      											 "pathRewrite":{
        "^/api":""}
      		             }
      		        }
      		    }
      		}
    
    }

### 对于springboot ###

添加CorsConfig配置文件  
![在这里插入图片描述][76995be3645349309d1ff75be2e94769.png]

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    public class CorsConfig {
        
        @Bean
        public WebMvcConfigurer corsConfigurer() {
        
            return new WebMvcConfigurerAdapter() {
        
                @Override
                public void addCorsMappings(CorsRegistry registry) {
        
                    // 允许来自本地的8080端口发起的跨域请求
                    registry.addMapping("/api/**")
                        .allowedOrigins("*")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true).maxAge(3600);
                }
            };
        }
    }

### 对于发送axios请求 ###

在后面后端的端口链接用/api/代替。  
![在这里插入图片描述][880472245f3e421dac08e657bc3a7850.png]

[b08faef573ee47d38e227c2097a2bc10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fffbb4b71abb4e009c727c39465de0ae.png
[76995be3645349309d1ff75be2e94769.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/50ec0f27a29446d99ed4fc90e60040ac.png
[880472245f3e421dac08e657bc3a7850.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8ab0e52747f5455b937b9054290b802d.png