vue跨域问题的三种解决方案,vue前端解决跨域的方法

　　当VUE访问接口时，很可能会出现跨域请求，这将被提供接口的服务器拒绝。下面这篇文章主要介绍Vue如何解决跨域问题的相关信息，有需要的朋友可以参考一下。

　　什么是跨域

　　跨域意味着浏览器不允许当前页面的源从另一个源请求数据。指源协议、端口和域名。这三者只要有一个不一样，就是跨域。这里有一个经典的例子：

　　#跨域协议

　　http://a.baidu.com访问https://a.baidu.com；

　　#端口跨域

　　http://a.baidu.com:8080访问http://a.baidu.com:80；

　　#域名跨域

　　http://a.baidu.com访问http://b.baidu.com；

　　通常，您在访问不同服务器的过程中可能会遇到跨域问题，即策略同源问题CORS。

　　跨域一般是判断三个地方：http协议，请求地址，端口号。如果它们之间有任何差异，就会发生跨域。要解决这个问题，需要配置一个代理服务器，通过代理服务器实现跨域请求。

　　解决跨域的情况一般就是如下图：

　　vue.config.js文件中增加了Vue中的跨域配置：

　　配置。

　　模块.导出={

　　devServer: {

　　Proxy: http://localhost:5000 //配置访问的服务器地址

　　}

　　}

　　写多个配置。

　　模块.导出={

　　devServer: {

　　代理服务器：{

　　/api: {

　　Target: 3358localhost: 5000 ，//配置访问的服务器地址

　　Pathrewrite: {/api:}，//用于将请求中的/api字符串替换为空字符串，然后可以正确访问访问地址。如果不添加这一行配置，访问地址就会变成：3358 localhost:5000/API/request _ URL，这样的请求就会发生404操作。

　　Ws: true，//是否支持webstocket，默认值为true。

　　ChangeOrigin: true //用于控制请求头中的主机值。默认值为true。

　　},

　　/api2 :

　　Target: 3358localhost: 6000 ，//配置访问的服务器地址

　　Pathrewrite: {/api2:}，//用于将请求中的/api2字符串替换为空字符串，然后才能正确访问访问地址。如果不添加这一行配置，访问地址就会变成：3358 localhost:6000/API/request _ URL，这样的请求就会发生404操作。

　　Ws: true，//是否支持webstocket，默认值为true。

　　ChangeOrigin: true //用于控制请求头中的主机值。默认值为true。

　　}

　　}

　　}

　　}

　　添加代理服务器的相关配置后，需要通过ajax请求访问服务器。vue一般用axios库。这里以axios库为例：

　　安装axios

　　npm i axios

　　使用axios

　　//介绍axios库

　　从“axios”导入axios

　　导出默认值{

　　名称：学生，//组件名称

　　//组件使用的方法

　　方法：{

　　评论内容`:get请求访问/api前缀开头的地址，但实际访问的地址是：http://localhost:5000/request _ URL `。

　　test1() {

　　axios . get( http://localhost:8080/API/request _ URL )。然后(res={

　　console . log(RES . data)；//输出请求响应值的内容

　　});

　　},

　　评论内容：` get请求访问/api2前端开头的地址，但实际访问的地址是：http://localhost:6000/request _ URL `。

　　test2() {

　　axios . get( http://localhost:8080/API 2/request _ URL )。然后(res={

　　console . log(RES . data)；//输出请求响应值的内容

　　})

　　}

　　}

　　}

　　总结

　　关于Vue如何解决跨域问题的这篇文章就到这里了。关于Vue如何解决跨域问题的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。