proxy跨域不生效_前端开发：深入使用proxy代理解决跨域问题
在前端領域里面，跨域指的是瀏覽器允許向服務器發(fā)送跨域請求，進而克服Ajax只能同源使用的局限性限制。同源策略是一種約定，而且是瀏覽器中最基本也是最核心的安全功能，若缺少了該策略，瀏覽器非常容易被***；同源就是指“協(xié)議+域名+端口”都一樣，就算有兩個不同域名指向同一個IP地址也不能是同源。同源策略只有在瀏覽器中存在，服務器中確不存在，所以遇到需要跨域請求的地址將其轉(zhuǎn)發(fā)服務器后委托服務器去請求即可。
一、實際開發(fā)中遇到的跨域問題解決方法
先來舉一個簡單的例子說明一下：
首先來看一下跨域引起的報錯提示：
解決步驟：打開Vue項目，然后在項目中找到config文件夾里面的index.js文件，然后找到proxyTable，然后添加以下代碼段即可：proxyTable:?{
['/java/mgr-auth']:?{??//替換代理地址名稱
target:?'http://dev-cloud.bc.com/mgr-auth',?//代理地址
changeOrigin:?true,?//可否跨域
pathRewrite:?{
['^/java/mgr-auth']:?'',?//重寫接口，去掉/java/mgr-auth
}
}
}
設置完畢之后，重啟一下服務，根據(jù)實際情況重啟項目: npm run serve或者是npm run dev。
重啟項目之后，在接口封裝和調(diào)用那里進行設置，最后就可以正常訪問接口，跨域問題隨之解決。
二、常見的跨域情形
常見的跨域情形通過URL鏈接來區(qū)分主要有6種：
①同域名，不同端口；②同域名，不同文件或者路徑；③同域名，不同協(xié)議；④域名和域名對應相同的IP；⑤主域名相同，子域名不同；⑥不同域名。
三、跨域解決方法匯總
解決跨域問題，一般可以通過三種方式來解決：①前端項目配置代理；②服務端配置跨域訪問；③使用Chrome的擴展插件。
1、前端項目配置代理的方法解決跨域問題
通過前端項目配置代理的方法解決跨域問題，具體步驟參考文章開頭的案例來解決。
2、服務端配置跨域訪問的方法解決跨域問題
這個需要在服務端進行配置，具體操作設計后臺操作，這里不再具體講解。
3、通過Chrome的擴展插件的方法解決跨域問題
搜索使用Allow CORS: Access-Control-Allow-Origin即可，如果不能正常搜到，請聯(lián)系本作者來為你解答。
四、代理類型
常見的代理類型大概有四種：①基本代理；②重寫路徑代理；③支持HTTPS的代理；④把請求代理到同一目標的代理。
1、基本代理的實例module.exports?=?{
dev:?{
proxy:?{
'/api':?'http://localhost:8080’
}
}
};
2、重寫路徑代理的實例module.exports?=?{
dev:?{
proxy:?{
'/api':?{
target:?'http://localhost:8080’,
pathRewrite:?{'^/api'?:?''}
}
}
}
};
3、支持HTTPS代理的實例module.exports?=?{
dev:?{
proxy:?{
'/api':?{
target:?'https://dev-cloud.cc.com',
secure:?false
}
}
}
};
4、請求代理到同一目標的代理的實例module.exports?=?{
dev:?{
proxy:?[{
context:?['/auth',?'/api'],
target:?'http://localhost:8080’,
}]
}
};
以上就是本章全部內(nèi)容，歡迎關注三掌柜的微信公眾號“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，歡迎關注！
總結(jié)
以上是生活随笔為你收集整理的proxy跨域不生效_前端开发：深入使用proxy代理解决跨域问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql报表占容量_MariaDB(M
- 下一篇： 2017年html5行业报告,云适配发布