React ajax中的跨域以及代理服务器

        

Axios的诞生

        为什么会诞生Axios？说到Axios我们就不得不说下Ajax。最初的旧浏览器页面在向服务器请求数据时，由于返回的是整个页面的数据，所以整个页面都会强制刷新一下，这对于用户来讲并不是很友好。因为当我们只需要请求部分数据时，服务器返回给我们的确是整个页面的数据，这样会造成网络资源的占用，即十分消耗网络资源。为了提高数据请求效率，异步网络请求Ajax就应运而生了，它可以在页面无刷新的情况下请求数据。因此，这样一来，当我们只是需要修改页面的部分数据时，可以实现不刷新页面的功能。

         Axios的基础用法（get、post、put 等请求方法）

        Axios常用的几种请求方法：get，post，put，patch，delete

        1.get：一般用于获取数据

        2.post：一般用于提交数据（表单提交与文件上传）

        3.patch：更新数据（只将修改的数据推送到后端（服务端））

        4.put：更新数据（所有数据推送到服务端）

        5.delete：删除数据

        当我们前端向后端发送请求的时候，比如我们有一个服务器，端口我们本地打开3000，那么我们本地前端就无法在3000端口打开，因为被后端占用了，前端可以通过http：//localhost：3000/students给后端的/students路由发送get请求，但是这里后端无法返回数据给前端，因为后端无法跨域给前端的3001端口，这时候就涉及到我们今天所学的内容，代理服务器。

        

        这里的错误是跨域无法返回数据，也就是请求发出去但是回不来，因为不是同一端口被拦下来了。

        

        这个图可以帮助我们理解，一个中间代理服务器，在前端配置好，那么他现在就是在前端的端口运行着，也就是说它是端口3000，然后我们用第一个方法配置这个中间服务器。

        

        在package.json文件加“proxy”:"http://localhost:3000",就是当我们前端不管在什么端口下运行，我们发送的命令都通过3000端口发送。配置proxy之后必须重新启动前端。

        

        配置好后我们用axios库里面的请求方法get，向后端发送请求获取后端中的数据，这里是当我们发送请求的时候，我们把请求给代理服务器，然后代理服务器给服务器，然后服务器返回数据给代理服务器，代理服务器没有跨域的限制，所以可以拿到返回的数据，然后前端就可以拿到和自己相同端口的代理服务器的数据。

        

        如果改成index.html那么返回的直接就是当前端口下的public下的lndex.html文件，也就是如果3000端口有的内容，就不会发送get请求。如果改为 index2.html就会404因为前后端都没有找到对应的路径

        但是这种proxy代理服务器就写死了，只能从3000向3001，如果我还有服务器3001 就无法拿到数据。因为这种方式只能配置一个代理服务器，只能从3000->5000。

        如果我们需要对多个服务器请求数据，就需要多个代理服务器，这时候我们就需要去写一个setupProxy.js文件去配置多个代理服务器。

        

        添加这个文件然后 用的common.js 也就是说不是前端代码是node,js

        

        

        这里的http-proxy-middleware代理服务器库是脚手架自带的。我们在package.json中直接用proxy：“http://localhost:3001”也是用的这个库

        这样就可以在3000端口请求5000端口的后端数据了。

        然后我们去看我们写的配置文件都是什么作用。

        

        host字段指的是本次请求从哪里发出的。

        

        

        这里的请求地址是前端发出的请求中请求的接口地址，Host就是请求的地址这里是localhost：3001，因为开代理所以认为和后端运行的端口一致。如果changeOrigin关闭就是3000，因为从3000发过来的。不过只是欺骗服务器一下，不影响代理服务器正常运行。

        

        如果我们去掉了配置文件中的pathrewrite（"^api1":''）我们在前端路径加入api表示如果当前端口没有找到对应的数据，就去后端对应的路由找，这里我们api没有变成‘’所以后端我们访问的地址就变成了api/students这显然不存在

        

        

        总结一下，当我们前端只需要访问一个服务器以及从服务器获取数据的时候，我们直接配置proxy："http://localhost:3000"就可以 了，但是如果多个的话我们就需要去专门配置代理服务器文件然后设置多个代理服务器，来指向我们想要访问的服务器地址。还有一个重要点，这里proxy会报错，应该改为{createProxyMiddleware}。这里就是代理服务器相关内容。明天见