midway|midway 跨域
midway 跨域
最近准备上手midway.js来开发点东西。开发的API，在前端（vue+axios）调用时总是提示跨域，但ajax又能调用。浪费了很多时间，在此记录一下。
midway 配置：
之前搜索过跨域问题解决办法：csrf 配置
//在”src/config/config.default.ts”，添加代码如下export default (appInfo: EggAppInfo) => {
const config = {};
……
// 跨域@midwayjs/web 默认添加了此项配置的
config.security = {
csrf: {
enable: false,
},domainWhiteList: ['http://127.0.0.1:9384'], // 允许跨域的域名
};
……
} 提示：很多文档说的解决跨域，这样一设置就OK了，实践告诉我关这个配置还是不行的！！CORS 配置
security 配置项是eggjs中对安全的一项配置，详见： 安全威胁 CSRF 的防范
安装 egg-cors
$ npm i egg-cors --save 配置插件启用
// src/config/plugin.ts
exports.cors = {
enable: true,
package: 'egg-cors',
}配置 cors 插件
// src/config/config.default.ts
export const cors = {
// {string|Function} origin: '*',
// {string|Array} allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
};
如果这个地方设置了origin: '*'，那么在security下设置的domainWhiteList无用了如果只想特定域名，需要在 security 插件处配置。详见 上面csrf
另一种设置方法
origin(ctx) { // return "*"; // 允许来自所有域名请求 // return ctx.header.origin; // 当*无法使用时，使用这句,同样允许所有跨域 // return 'http://localhost:8080'; //单个跨域请求 // 允许多个跨域 const allowCors = [ 'http://localhost:9384', 'http://127.0.0.1:9384', 'http://172.16.92.62:9384', ]; return allowCors.indexOf(ctx.header.origin) > -1 ? ctx.header.origin : ''; },
经测试allowMethods 好像不管用
domainWhiteList: ['http://127.0.0.1:9384'], // 允许跨域的域名经测试：在security 下指定了此项，config.cors不用设置也行vue axios
【midway|midway 跨域】如果你在axios设置中添加了 withCredentials=true 这个选项,那么请求也会造成跨域后端设置方法：
参考：https://blog.csdn.net/hermits...
config.cors{
credentials: true,
origin: 'http://127.0.0.1:9384', // 注意，这个地方不能使用 * 可以使用上面介绍的函数方式，必须要包含你的前端地址
}其他框架
参考： https://www.yuque.com/midwayj...
推荐阅读
- vue-cli3.0使用proxytable解决跨域问题
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- CORS:跨域资源请求的标准方案
- 别往下翻了，三句话说清楚跨域资源请求报错的由来
- axios|axios + springboot 跨域问题cookie
- 前端|axios的cookie跨域以及相关配置
- 后端和服务器|跨域(Access-Control-Allow-Origin)解决方案详解
- javascript|跨域解决方案JSONP
- springboot|axios（ajax），springboot 跨域携带session
- cross-storage|cross-storage 浏览器 Web 跨域本地缓存