{"action":"opened","issue":{"url":"https://api.github.com/repos/nicewahson/blog/issues/3","repository_url":"https://api.github.com/repos/nicewahson/blog","labels_url":"https://api.github.com/repos/nicewahson/blog/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/nicewahson/blog/issues/3/comments","events_url":"https://api.github.com/repos/nicewahson/blog/issues/3/events","html_url":"https://github.com/nicewahson/blog/issues/3","id":299288430,"number":3,"title":"当fetch遇见CORS","user":{"login":"nicewahson","id":15240937,"avatar_url":"https://avatars1.githubusercontent.com/u/15240937?v=4","gravatar_id":"","url":"https://api.github.com/users/nicewahson","html_url":"https://github.com/nicewahson","followers_url":"https://api.github.com/users/nicewahson/followers","following_url":"https://api.github.com/users/nicewahson/following{/other_user}","gists_url":"https://api.github.com/users/nicewahson/gists{/gist_id}","starred_url":"https://api.github.com/users/nicewahson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nicewahson/subscriptions","organizations_url":"https://api.github.com/users/nicewahson/orgs","repos_url":"https://api.github.com/users/nicewahson/repos","events_url":"https://api.github.com/users/nicewahson/events{/privacy}","received_events_url":"https://api.github.com/users/nicewahson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-02-22T09:59:22Z","updated_at":"2018-02-22T09:59:22Z","closed_at":null,"author_association":"OWNER","body":"最近做了一个无头浏览器phantomjs截微信文章的功能，最后拆出了三个功能，一个是把整篇文章下载成一张长图，一个是把长图切成小图然后全部上传到后台再返回全部的图片地址，再一个就是看不见的直接把这些图片链接全部上传到已有的接口。下载图片无非就是把phantomjs截下来的图保存到本地，然后再用nodejs去读图下载图，关键代码就这点\r\n<pre>\r\nvar stm = fs.createReadStream('./page/' + outfiles[0]).pipe(resp);\r\nstm.on('finish', function () { //在pipe结束后再删除，否则pipe出来的会缺失\r\n    console.log('finish success')\r\n    fs.unlinkSync('./page/' + outfiles[0])\r\n})\r\n</pre>\r\n然后是切图上传小图。这步结束后，上传所有图片链接时就出了点问题。\r\n\r\n先说一下，node中间层和前台是不同域的，所以先要上CORS配置\r\n<pre>\r\nres.setHeader(\"Access-Control-Allow-Origin\", \"*\");\r\n//res.setHeader(\"Access-Control-Allow-Origin\", req.headers.origin);\r\n//res.setHeader(\"Access-Control-Allow-Headers\", \"X-Requested-With,token, tookie\");\r\nres.setHeader(\"Access-Control-Allow-Methods\", \"PUT,POST,GET,DELETE,OPTIONS\");\r\nres.setHeader(\"X-Powered-By\", ' 3.2.1');\r\n</pre>\r\n允许所有请求来源和请求方式。上面有一个OPTIONS请求，这个是prelight，也就是预检请求。这里要再记一下简单请求和非简单请求，因为浏览器再发起非简单请求时，会先发一个预检请求，也就是OPTIONS请求方式的\r\n\r\n请求方法是以下三种方法之一：\r\n* HEAD\r\n* GET\r\n* POST\r\n\r\nHTTP的头信息不超出以下几种字段：\r\n* Accept\r\n* Accept-Language\r\n* Content-Language\r\n* Last-Event-ID\r\n* Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain\r\n\r\n上面这些条件，只要有一个不满足，那就是非简单请求，就会发OPTIONS，[点这里](http://www.ruanyifeng.com/blog/2016/04/cors.html)了解更多。\r\n\r\n前台使用的是fetch进行请求处理，因为后台处理图片链接的接口是需要cookie的，由于cookie是在后台服务器生成的，而且node起的服务是单独部署的，所以作为中间层的node是无法直接获取到cookie的(不是同一个域)，也就是说，即使是fetch里面添加了\r\n<pre>\r\n    credentials: 'include'\r\n</pre>\r\n也是没用的。\r\n\r\n再一个，当fetch时添加了credentials的话，就会出现遇见请求失败，origin设置为*不允许，原因[在这里](https://stackoverflow.com/questions/42803394/cors-credentials-mode-is-include)，所以就有了第二种的req.headers.origin。"}}
{"actor":{"display_login":"nicewahson"}}