proxy代理解決跨域問題

在前端領域里面，跨域指的是瀏覽器允許向服務器發送跨域請求，進而克服Ajax只能同源使用的局限性限制。同源策略是一種約定，而且是瀏覽器中最基本也是最核心的安全功能，若缺少了該策略，瀏覽器非常容易被攻擊；同源就是指“協議+域名+端口”都一樣，就算有兩個不同域名指向同一個IP地址也不能是同源。同源策略只有在瀏覽器中存在，服務器中確不存在，所以遇到需要跨域請求的地址將其轉發服務器后委托服務器去請求即可。

 

一、實際開發中遇到的跨域問題解決方法

先來舉一個簡單的例子說明一下：

首先來看一下跨域引起的報錯提示：

 

解決步驟：打開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

}

}

}

 

設置完畢之后，重啟一下服務，根據實際情況重啟項目: npm run serve或者是npm run dev。

重啟項目之后，在接口封裝和調用那里進行設置，最后就可以正常訪問接口，跨域問題隨之解決。

二、常見的跨域情形

常見的跨域情形通過URL鏈接來區分主要有6種：

①同域名，不同端口；②同域名，不同文件或者路徑；③同域名，不同協議；④域名和域名對應相同的IP；⑤主域名相同，子域名不同；⑥不同域名。

三、跨域解決方法匯總

解決跨域問題，一般可以通過三種方式來解決：①前端項目配置代理；②服務端配置跨域訪問；③使用Chrome的擴展插件。

1、前端項目配置代理的方法解決跨域問題

通過前端項目配置代理的方法解決跨域問題，具體步驟參考文章開頭的案例來解決。

2、服務端配置跨域訪問的方法解決跨域問題

這個需要在服務端進行配置，具體操作設計后台操作，這里不再具體講解。

3、通過Chrome的擴展插件的方法解決跨域問題

涉及到牆的問題，所以在保證有梯子的情況下搜索使用Allow CORS: Access-Control-Allow-Origin即可。

四、代理類型

常見的代理類型大概有四種：①基本代理；②重寫路徑代理；③支持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’,

}]

}

};