背景：调用百度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：找不到（打包后代理失效）
网友评论