写一个书库项目控制台遇到的问题

3月到4月中间的三个星期和小伙伴一起合作完成了一个主要用于交换分享好书的小程序。一个人负责小程序，一个负责后端，我负责控制台。主要用vue、vue-router、element-ui等技术，下面梳理一下我写控制台时遇到的问题以及解决方法，有说法错误的还望大佬们指出。

一、图片提交到服务器总是失败

首先，图片提交到服务器有两种方式，一种是即传即提交，一种是提交到表单然后表单再提交。

第一种方式调用原生的或者框架的我用了都没问题，第二种方式老是会报跨域问题，即使后端已经设置了header('Access-Control-Allow-Origin:*');但我发现用原生表单提交就不会报跨域错误，代码如下，(其中server_url是服务器地址，这里不方便透露)

  <form action="http://server_url/addBook.do" method="post" enctype="multipart/form-data">  
   		<input id="name" name="name" value="重构改善既有代码的设计">     
   		<input id="author" name="author" value="lunus">     
   		<input id="pubHouse" name="pubHouse" value="机械出版社">     
   		<input id="isbn" name="isbn" value="0123456">     
        选择文件:<input type="file" name="image" width="120px">  
        <input type="submit" value="上传">  
  </form>  

首先发图片到服务器content-type必须为multipart/form-data，原生表单发送的数据没经过处理因此是Request-Payload。于是衍生想法让发送的表单数据形式以及请求头跟原生表单提交的一致不就可以解决问题？

下面代码的尝试顺利解决~

用FormData可取到在表单中上传的图片并变成原生表单提交的数据形式，不管是原生上传图片按钮还是框架图片上传组件都可以。processData指不处理传送的数据形式，content-type则用默认的，这里有图片上传默认会用form-data，完美解决，请求头以及数据形式跟原生表单一模一样，而这里用了ajax，则更加灵活

二、跨域问题

当请求头不携带cookie或者token时，后端设置header('Access-Control-Allow-Origin:*')即可解决浏览器的跨域报错，若携带了，则设置了跨域允许还是会报错，在我这个项目中我是通过在vue的配置文件中设置proxyTable属性解决这个问题的。

配置的路径如下：

server_url填写服务器域名，前面的‘/’表示发送ajax的url第一个符号是 / 的话，就在其前面加上服务器地址，changeOrign表示允许跨域，pathRewrite表示重写路径，可不写

这样配置后提交表单调用axios

这里请求的url原地址为'server_url/getBookList.do',比如server_url为http://47.93.192.186:8080，记住配置文件改之后需重新npm run dev才可生效

三、vue单文件组件怎么部署到服务器上访问

这个网上一搜就有了，就是用npm run build即可自动打包为线上环境，然后项目中会生成一个dist文件夹

就将dist文件夹放在服务器资源里，再访问index.html即可

控制台项目已放在我的github开源项目中

zyqq/read-manager

，欢迎有兴趣的朋友查看提出意见