这两天试了下 百度的低代码平台amis，号称不需要懂前端就可以写的框架，第一个demo就碰到 CORS No Allow Credentials 错误，有一种说法是后端需要配置下允许*访问，但我试了下不是这个原因，需要改前端代码，最后附上后端修改代码
问题现象：
问题原因：
按照官网给的demo，用的sdk模式，按大佬解释是 默认用的比较老的XMLHttpRequest发起的请求，不允许响应为通配符*
这是报错的代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>amis demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="sdk/sdk.css" />
<link rel="stylesheet" href="sdk/helper.css" />
<link rel="stylesheet" href="sdk/iconfont.css" />
<!-- 这是默认主题所需的，如果是其他主题则不需要 -->
<!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
<!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
<!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
<style>
html,
body,
.app-wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="sdk/sdk.js"></script>
<script type="text/javascript">
(function () {
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
title: '登录页面',
body: {
type: 'form',
mode: 'horizontal',
api: 'http://127.0.0.1/api/user/login',
method: 'post',
body: [
{
label: '用户名',
type: 'input-text',
name: 'username'
},
{
label: '密码',
type: 'input-password',
name: 'password'
}
]
}
};
let amisScoped = amis.embed('#root', amisJSON);
})();
</script>
</body>
</html>引入 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> //增加引入axios
将 amis.embed 的返回修改为：
let amisScoped = amis.embed('#root', amisJSON,{},{
fetcher: async ({url, method, data, config})=> {
return axios({url,method,data,config});
},
});<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>amis demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="sdk/sdk.css" />
<link rel="stylesheet" href="sdk/helper.css" />
<link rel="stylesheet" href="sdk/iconfont.css" />
<!-- 这是默认主题所需的，如果是其他主题则不需要 -->
<!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
<!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
<!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> //增加引入axios
<style>
html,
body,
.app-wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="sdk/sdk.js"></script>
<script type="text/javascript">
(function () {
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
title: '登录页面',
body: {
type: 'form',
mode: 'horizontal',
api: 'http://127.0.0.1/api/user/login',
method: 'post',
body: [
{
label: '用户名',
type: 'input-text',
name: 'username'
},
{
label: '密码',
type: 'input-password',
name: 'password'
}
]
}
};
// let amisScoped = amis.embed('#root', amisJSON); // 这是修改前的代码
let amisScoped = amis.embed('#root', amisJSON,{},{
fetcher: async ({url, method, data, config})=> {
return axios({url,method,data,config});
},
});
})();
</script>
</body>
</html>附上改的后端代码，我这里没生效，如果上面解决不了可以试下，后端go语言，gin框架，所以在入口处做下处理
// 创建一个CORS配置对象，设置AllowCredentials为false
config := cors.DefaultConfig()
config.AllowAllOrigins = true // 允许所有源（根据实际情况调整）
config.AllowMethods = []string{"GET", "POST", "PUT", "PATCH", "DELETE"} // 允许的方法列表
config.AllowHeaders = []string{"Content-Type", "Authorization"} // 允许的请求头
config.ExposeHeaders = []string{"Content-Length", "ETag"} // 允许暴露给客户端的响应头
config.AllowCredentials = false // 禁止跨域请求携带凭据
r.Use(cors.New(config))
