Umi

1.为什么会呈现跨域问题？跨域问题的呈现：是因为浏览器的同源策略导致的。同源策略：同源策略是浏览器是浏览器最外围也最根本的平安性能，因而其次要目标是为了平安，如果没有同源限度，在浏览器中的cookie等其余数据能够任意读取，不同域下的DOM任意操作，ajax任意申请其余网站的数据，包含隐衷数据。同源策略限度三种操作： 1、cookie，localstorage，IndexedDB无奈读取 2、DOM无奈获取 3、Ajax申请不能发送 2.什么是跨域？当一个申请url的协定、域名、端口三者之间任意一个与以后页面url不同即为跨域。 以后页面url被申请页面url是否跨域起因http://www.test.com/http://www.test.com/index.html否同源（协定、域名、端口号雷同）http://www.test.com/https://www.test.com/index.html是协定不同（http/https）http://www.test.com/http://www.baidu.com/是主域名不同（test/baidu）http://www.test.com/http://blog.test.com/是子域名不同（www/blog）http://www.test.com:8080/http://www.test.com:7001/是端口号不同（8080/7001）3.Umi产生CORS谬误的及解决举例：CORS谬误的产生：首先：用node发动了一个http://localhost:8080 的服务；那么在这个服务器下拜访的网页也就是默认在 http://localhost:8080 这个域上面；而后：假如服务端所在的域是http://example.com；这样通过ajax发送申请的话;此时：由客户端间接传过来的就是一个域名为 http://localhost:8080 的申请；而服务端所在的域是 http://example.com；尽管协定雷同，然而域名不同，跨域申请失败；代理解决跨域的原理：将代理层作为在客户端和服务端之间的中间层，代理层的作用就是将不同的域名转换为雷同的域名。代理解决跨域问题原理图解及过程：首先：客户端发送申请，先通过代理层的解决，将域名http://localhost:8080转换为了http://example.com；将域名转换之后再将申请发送到服务端；而后，服务端接管到的申请的域名就为http://example.com；因而，同理，服务端将响应发送回客户端的时候，响应也是先通过代理层的解决，将响应的域名http://example.com转换为了http://localhost:8080；这是客户端接管到的响应的域名也和本人的域名雷同了。 umi应用proxy代理解决跨域1.首先找到confige.js文件，配置如下： proxy: { '/api': {// 标识须要进行转换的申请的url target: 'http://example.com/',// 服务端域名 changeOrigin: true,// 容许域名进行转换 pathRewrite: { '^/api': '' },// 将申请url里的api去掉 } },2.在src/utils/ip.js配置如下： function remoteLinkAddress() { const IPaddress = `/api`; return IPaddress;}export default remoteLinkAddress;此时，咱们收回的申请http://localhost:8080/api/xx/xx，当这个url发送到代理层时，proxy检测到'/api'标识，将域名更换为http://example.com/api/xx/xx，而后将申请url中的/api去掉，这样咱们发送到服务器端的Url：http://example.com/xx/xx； 参考资料： 什么是跨域？跨域解决办法umi应用proxy代理解决跨域问题-思否umi应用proxy代理解决跨域问题-CSDN了解尚浅，望不吝赐教！

本文适宜学习React开发的初学者，通过此框架的应用以利于前期应用antd Pro框架开发更简单的前端页面Step 1:搭建umi根本框架umi.js脚手架根本搭建搭建实现后能够失去如下图所示的我的项目运行yarn start指令能够在浏览器中看到如图所示的界面 实现以上操作后的问题 我的项目默认应用ts及React Hooks来实现对老手不是很敌对没有引入dva.jsStep 2:引入dva.js1.首先找到.umirc.ts文件，在配置中退出如下配置 dva: { immer: true, hmr: false, },2.在src文件夹下建设 models文件夹，而后在pages文件夹上面建设Demo1文件夹，并在Demo1文件夹中建设models文件夹，建设实现之后如下图所示更具体的阐明请参考dva配置 Step 3:应用class组件书写新页面函数组件和Class组件请参考React官网文档：React组件阐明 在src/pages/Demo1文件夹（上文已建设）上面建设index.js文件其根本代码如下： import React, {Fragment} from 'react';class Demo extends React.PureComponent { constructor(props) { super(props); } render() { console.log(this.props); return ( <Fragment> <div>第一个页面</div> </Fragment> ) }}export default Demo;Step 4:定义dva Models并建设连贯在src/pages/Demo1/models中建设文件DemoModels.js文件 export default { namespace: 'basicDataModel', state: { data: [ {text: 1, value: 2}, ], }, effects: {}, reducers: { save(state, action) { return { ...state, ...action.payload, }; }, },};输出以上的代码即建设了名称为basicDataModel的model，接下来在Step3中建设的index.js中输出如下的代码建设与model的连贯 ...