前端POST跨域学习总结

背景：调用百度ocr接口（接口文档），需要先get拿到token，然后post调文字识别接口。会出现跨域请求的问题。

Vue项目在调试的时候可以通过设置config文件夹下的index.js，进行代理。如下：

dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/baiduApi': {
              target: 'https://aip.baidubce.com', //访问地址
              changeOrigin: true,
              secure: false, 
              pathRewrite: {
                '^/baiduApi': ''
              }
            }
        },
...

然后

      this.$axios.post('https://aip.baidubce.com/2.0/ocr/v1/accurate_basic',form,
        //this.axios.post(baiduApi,form,
          {  headers:{  dataType:'json',
                      contentType:'application/x-www-form-urlencoded',
        }}).then(res =>{
          if(res.status ==200){
          let str = '';
          console.info(res);
          let data = res.data.words_result;
          for(var i = 0;i< data.length;i++){
            str = str + data[i].words+'\n'
          }
            console.info(str);
          }
        })

就可以成功调通了。

ps.因为这样请求的时候，请求地址就和本地地址“同源”了，"使用反向代理，将第三方的接口地址映射成本地的地址，前端只要调用本地的地址，就可以请求到第三方的数据了"

请求本地地址

但是这个proxyTable只能在本地调试的时候管用，打包的时候会失效。所以需要Nginx来进行反向代理的配置，完成之前proxyTable的工作。

本来事情到此结束了，但是因为某些原因不能用Nginx配置这个代理，然后我就又学（bai）习（du）了两天跨域问题如何仅仅在前端解决。

知识点：
同源策略是【浏览器】的安全功能，在发送【Ajax】请求的时候浏览器会根据同源策略检测，当协议、域名、端口任何一个不同时，就是跨域了，不可以跨域请求。

听说fetch可以跨域，于是试着用了一下，有一个mode配置项

fetch的mode配置项有3个值，如下：

• same-origin：该模式是不允许跨域的，它需要遵守同源策略，否则浏览器会返回一个error告知不能跨域；其对应的response type为basic。
• cors: 该模式支持跨域请求，顾名思义它是以CORS的形式跨域；当然该模式也可以同域请求不需要后端额外的CORS支持；其对应的response type为cors。
• no-cors: 该模式用于跨域请求但是服务器不带CORS响应头，也就是服务端不支持CORS；这也是fetch的特殊跨域请求方式；其对应的response type为opaque。

总的来说就是，fetch也不行。

然后搜了vue生产环境如何跨域，那个设置API_ROOT的方法（ 参考：vue解决跨域问题）不适合我的情况。这个方法只是设置了在开发环境和生产环境调用不同的接口地址（参考：Vue项目生产环境解决跨域问题）。适用于解决调取自己的后台接口（开发时前端和后端接口跨域，生产环境时在同一个地址下不跨域，所以需要分别设置），但并不是解决了跨域问题。

综上，前端跨域，get可以用jsonp，post不需要返回的话可以用fetch，需要取到返回的话必须要服务端配合（网上说的纯前端是把Nginx服务器算在前端里）

——————————————————————————
其他参考资料：
9种常见的前端跨域解决方案（详解）
vue页面直接调用百度图片文字识别的接口
vue调用百度api时跨域问题的解决方案
跨域问题（纯前端解决，纯后端解决，webservice解决）
fetch使用的常见问题及解决办法

————————————————————
解决这个问题时遇到的一些状态码：
200：请求成功
302：重定向（百度接口地址拼接的时候写错了）
400：语法格式客户端错误（大概是我哪里写错了）
401：没有权限（请求参数写错了）
404：找不到（打包后代理失效）