背景：調用百度ocr接口（接口文檔），需要先get拿到token，然后post調文字識別接口。會出現(xiàn)跨域請求的問題。
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.因為這樣請求的時候，請求地址就和本地地址“同源”了，"使用反向代理，將第三方的接口地址映射成本地的地址，前端只要調用本地的地址，就可以請求到第三方的數(shù)據(jù)了"
但是這個proxyTable只能在本地調試的時候管用，打包的時候會失效。所以需要Nginx來進行反向代理的配置，完成之前proxyTable的工作。
本來事情到此結束了，但是因為某些原因不能用Nginx配置這個代理，然后我就又學（bai）習（du）了兩天跨域問題如何僅僅在前端解決。
知識點：
同源策略是【瀏覽器】的安全功能，在發(fā)送【Ajax】請求的時候瀏覽器會根據(jù)同源策略檢測，當協(xié)議、域名、端口任何一個不同時，就是跨域了，不可以跨域請求。
聽說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生產(chǎn)環(huán)境如何跨域，那個設置API_ROOT的方法（ 參考：vue解決跨域問題）不適合我的情況。這個方法只是設置了在開發(fā)環(huán)境和生產(chǎn)環(huán)境調用不同的接口地址（參考：Vue項目生產(chǎn)環(huán)境解決跨域問題）。適用于解決調取自己的后臺接口（開發(fā)時前端和后端接口跨域，生產(chǎn)環(huán)境時在同一個地址下不跨域，所以需要分別設置），但并不是解決了跨域問題。
綜上，前端跨域，get可以用jsonp，post不需要返回的話可以用fetch，需要取到返回的話必須要服務端配合（網(wǎng)上說的純前端是把Nginx服務器算在前端里）
——————————————————————————
其他參考資料：
9種常見的前端跨域解決方案（詳解）
vue頁面直接調用百度圖片文字識別的接口
vue調用百度api時跨域問題的解決方案
跨域問題（純前端解決，純后端解決，webservice解決）
fetch使用的常見問題及解決辦法
————————————————————
解決這個問題時遇到的一些狀態(tài)碼：
200：請求成功
302：重定向（百度接口地址拼接的時候寫錯了）
400：語法格式客戶端錯誤（大概是我哪里寫錯了）
401：沒有權限（請求參數(shù)寫錯了）
404：找不到（打包后代理失效）
