uniapp的跨域问题

一、跨域问题

1、什么是跨域问题

浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

2、跨域常见问题

• 网络一般报403
  
• 控制端
  

3、跨域的解决办法

• 法一：
  点击manifest.json，找到源码分析，添加如下代码

"h5": {
	        "devServer": {
	            "proxy": {
	            	//”/api“意为以遇见/api便执行以下处理
	                "/api": {
	                	//”target“意为在/api前拼接target
	                    "target": "http://127.0.0.1:8080",
	                    //设置允许跨域——此处我经过测试发现可有可无
						"changeOrigin":true,
						//将/api替换成/
	                    "pathRewrite": {
	                        "^/api": "/"
	                    }
	                }
	            }
	        }
	    }

• 法二：
  在主目录下创建config.js文件，添加以下代码

module.exports = {
  devServer: {
    proxy: {
      //”/api“意为以遇见/api便执行以下处理
	  "/api": {
	    	//”target“意为在/api前拼接target
	    	"target": "http://127.0.0.1:8080",
	        //设置允许跨域——此处我经过测试发现可有可无
			"changeOrigin":true,
			//将/api替换成/
	        "pathRewrite": {
	             "^/api": "/"
	         }
	   }
    },
  }
}

3、页面的请求调用

• 页面请求调用后端接口，实现代码

//设计一个点击事件
//如：login()
//提交表单
			async onlogin(){
				if(this.user.password==""||this.user.username==""){
					alert("密码或账号为空");
					return;
				}
				if(this.user.password!=""&&this.user.username!=""){
					//发送数据到后台
					//const res=await api.login({password:this.password,username:this.username});
					console.info(this.user);
					uni.request({
					    url: 'http://localhost:8080/api/user/login', //仅为示例，并非真实接口地址。
					    method:"POST",
						data:this.user,
					    success: (res) => {
					        console.log(res.data);
					        //this.text = 'request success';
							if(res.data.code==200){
								alert("登入成功");
							}else{
								alert("登录失败")
							}
							
					    }
					});

				}
			},

注意：uri： ‘http://localhost:8080/api/user/login’,（这是错误的写法）
url: ‘/api/user/login’,（正确的写法，此处只需要写/api/+后端接口）