tp6 uniapp vue 前后端跨域解决方案

tp6 + uniapp 前后端跨域解决方案

php解决方案

// 自增 允许跨域
// * 代表允许所有域名访问    也可指定域名访问
// header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Origin: http://localhost:8080');
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header('Access-Control-Allow-Headers:x-requested-with,content-type,token');
    exit("ok");
}

uniapp解决方案

// manifest.json
"h5": {
	"devServer": {
		"proxy": {
			"/dpc": {
				"target": "http://接口域名.com/",  // 你请求的第三方接口
				"pathRewrite":{"^/dpc":""} // 路径重写，
			}
		}
	}
}

// 请求代码 在接口前加入创建的dpc
uni.request({
	url: '/dpc/api/index/getBanner',
	success: (res) => {
		console.log(res)
	}
});

vue解决方案

// config->index.js
proxyTable: {
  '/api': {
    target:'http://接口域名.com/', // 你请求的第三方接口
    changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRewrite:{  // 路径重写，
      '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
    }
  }
},