快捷導(dǎo)航

前端vue打包項(xiàng)目,如何解決跨域問題

更新時(shí)間：2022年05月06日 08:40:06 作者：馬克Markorg

這篇文章主要介紹了前端vue打包項(xiàng)目，如何解決跨域問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue打包項(xiàng)目解決跨域

前段時(shí)間做一個(gè)vue打包成安卓和IOS的App，遇到了跨域問題，直接拿了之前項(xiàng)目的配置，卻不起作用。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
?
@Configuration
public class CorsConfig implements WebMvcConfigurer {
?? ?
? ? @Override
? ? public void addCorsMappings(CorsRegistry registry) {
? ? ? ? registry.addMapping("/**")
? ? ? ? ? ? .allowedOrigins("*")
? ? ? ? ? ? .allowCredentials(true)
? ? ? ? ? ? .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
? ? ? ? ? ? .maxAge(3600);
? ? }
? ??
}

但是還是不行，后面查明是因?yàn)橹绊?xiàng)目nginx和項(xiàng)目在一個(gè)服務(wù)器，而APP的前端是在移動(dòng)端的。解決方法有所不同，如下

import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
?
@Configuration
public class LakeAppConfigurer extends WebMvcConfigurerAdapter {
?
? ? @Override
? ? public void addCorsMappings(CorsRegistry registry) {
? ? ? ? registry.addMapping("/**")
? ? ? ? ? ? ? ? .allowedOrigins("*")
? ? ? ? ? ? ? ? .allowCredentials(true)
? ? ? ? ? ? ? ? .allowedHeaders("*")
? ? ? ? ? ? ? ? .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS")
? ? ? ? ? ? ? ? .exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L)
? ? ? ? ? ? ? ? .maxAge(3600);
? ? }
}

完美解決。

vue項(xiàng)目解決跨域（打包上線無需手動(dòng)切換url）

1、在目錄config下的index.js中設(shè)置代理；

proxyTable: { //設(shè)置代理
'/api': { //使用"/api"來代替跨域地址139.xxx.xx
target: 'http://139.xxx.xx', //源地址
changeOrigin: true, //改變?cè)?
pathRewrite: { //路徑重寫
'^/api': 'http://139.xxx.xx'
}
}
},

2、分別配置開發(fā)環(huán)境和生產(chǎn)環(huán)境地址

在config目錄下dev.env.js中配置開發(fā)路徑：

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"/api"' // 配置代理路徑的符號(hào)，增加的內(nèi)容
})

在config目錄下prod.env.js中配置開發(fā)路徑：

module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://139.xxx.xx"' // 生產(chǎn)環(huán)境地址，增加的內(nèi)容
}

3、在組建中進(jìn)行使用，這里使用vue-resource;

//process.env.API_HOST 獲取當(dāng)前環(huán)境的api地址
methods:{
getData: function(){
this.$http.get(process.env.API_HOST + '/AiaaScadaSys/MonitorDB/info').then((response)=>{
this.$data.data_jianhuyi = response.body[0];
console.log(this.data_jianhuyi);
}, (response)=>{
return response.json();
});
},
}

小結(jié)：經(jīng)過這樣的配置后可以比較完美的解決跨域的問題而不用擔(dān)心在打包上線的時(shí)候還要手動(dòng)修改api地址，而且維護(hù)成本也低。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: