Ⅰ 解决Vue http中的跨域问题
在平常的项目开发当中，很容易遇到跨域的问题，好在vue-cli的脚手架提供了跨域的解决方案，在config下的index.js中有个proxyTable属性，在其中添加如下配置:
proxyTable: {
'/api':{
target:'http://localhost:8090',
changeOrigin:true,
pathRewrite:{
}
}
如上所示，如果在8090后在加路径，则无效（亲测）；
在pathRewite中可以添加替换，因为在正常代理过后会在路径结尾有ap这个路径，所以如果实际的地址和这个不同，则可以进行替换。
Ⅱ vue.js使用http-proxy-middleware解决跨域请求问题
最近在使用vue-cli搭建项目的过程中，遇到了跨域请求数据的问题，这里贴出我的解决方法，希望对大家有所帮助。
什么是跨域请求：
如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
这里，数据请求用的是vue-resource(目前vue官方是推荐使用axios)，安装插件：
npm install--save-devvue-resource
1
在main.js中引入插件：
importVueResourcefrom'vue-resource'
Vue.use(VueResource)
这里，解决跨域使用的是http-proxy-middleware来进行接口代理，安装方法同上：
npm install--save-devhttp-proxy-middleware
下面开始谈正事，举个栗子：
本地项目地址是：localhost:8080，现在我们要访问 http://m.maizuo.com/v4/api/film/comming-soon 和 http://m.maizuo.com/v4/api/billboard/home 这两个线上地址：
首先，设置build/dev-server.js：
varproxyMiddleware =require('http-proxy-middleware')
varserver = express()
server.middleware = [ proxyMiddleware(['/film/coming-soon'], {target:'http://m.maizuo.com/v4/api', changeOrigin:true}), proxyMiddleware(['/billboard/home'], {target:'http://m.maizuo.com/v4/api', changeOrigin:true})];
server.use(server.middleware);
注意，当要访问多个线上地址时，公共的地址部分写在target属性值里面，比如这里的 http://m.maizuo.com/v4/api ，然后[ ]里边写地址的不同部分。
然后，修改config/index.js :
dev:{env:require('./dev.env'), port:8080, proxyTable: {'/api': { target:'http://m.maizuo.com/v4/api', changeOrigin: true, pathRewrite: {'^/api':''} } } }
这里的target同上面的一样，然后’/api’和’^/api’代表的就是这个根目录地址；
然后，在页面中具体的调用为：
this.$http.get('api/billboard/home').then((response) => {
});
这里，url的值为api + [ ] 中的部分 ;
然后，我们就解决了vue中的跨域问题 ;
这里，贴一下http-proxy-middleware插件的github地址，看更多用法 :
https://github.com/chimurai/http-proxy-mid
Ⅲ VUE本地跨域解决方案
我们前端使用接口时，时常遇到跨域问题，一般都是后台设置开放访问权限备启让解决跨域，如果后台不配合或者为了安全问题而不能开放权限，那么我们前端只能自己解决跨域问题了！！！直接再问vue中使用nodeJS进行代理就可以解决跨域问题。
1、首先找到项目所在的config文件下的index.js，打开此文件；
2、找到mole.exports里面的dev模块，dev:{ proxyTable:{ } };
将target设置成你想跨域的域名，
changeOrigin设置旁罩成true（即：允许跨域）；
pathRewrite设置新的路径，这个其实没有必要重新设置仿局；
host设置成：localhost；
port设置成自己本地项目的端口号如：8001；
3、找到main.js并打开，添加：Vue.prototype.HOST = '/api' //设置全局的请求域名；这样就可以全局使用了！
4、在请求接口的页面这样请求接口就可以啦：
var urls = this.HOST +'/login/get/dingdingUser';//this.HOST就是你跨域的域名，这样就可以直接跨域了；这时urls就是你的接口名称啦！！！
Ⅳ vue 如何实现跨域
跨域问题是因为浏览器的同源策略引起的，一种浏览器的安全机制，要求 协议，域名，端口 ，都要一致！
出于浏览器的同源策略限制，浏览器会拒绝跨域请求。
什么叫跨域？非同源请求，均为跨域。名词解释：同源 —— 如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（origin）。
怎么解决跨域？最常用的三种方式： JSONP、CORS、postMessage 。
jsonp，只支持get，不支持post，需要调用前端和被调用后端配合（比较常用）
后端HttpClient进行转发，两次请求，效率低，安全（类似Nginx反向代理）
服务端设置响应头，允许跨域，适于小公司快速解决问题
Nginx搭建API接口网关
Zuul搭建API接口网关
后四种都属于服务端设置，对于目前还是一个纯前端的我来说，先把前端的搞懂再说，所以在此只说前端
jsonp工作原理理解
jsonp实际上是通过动态插入js的方式实现的跨域，因为通过script标签引入js文件没有跨域一说
web客户端通过调用脚本的方式去调用跨域服务端动态生成的js文件（一般以json为后缀），同时传递一个callback参数给服务端，服务端以这个参数名为函数名，调用此函数以参数的形式将数据传到web端，这样就实现了前端跨域请求服务端数据。
【JSONP的优缺点】
优点：兼容性好（兼容低版本IE）
缺点：1.JSONP只支持GET请求； 2.XMLHttpRequest相对于JSONP有着更好的错误处理机制
CORS ：是W3C 推荐的一种新的官方方案，能使服务器支持 XMLHttpRequest 的跨域请求。CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源。
postMessage : window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持 window.postMessage方法。
Ⅳ vue vue.config.js常见配置、接口跨域代理和多服务配置
参考官岁链网 https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
这样我们就可以根据路径起始乎尺孙的不同前缀来访问不同的困碧服务接口
Ⅵ Vue项目中跨域问题的解决
在Web端Vue项目开发过程中，跨域问题是不可避免的；在我参与的Vue项目中，使用服务器代理的解决方案；针对不同的环境（开发环境/生产环境），采用了不同的服务器代理方案；
服务器代理的原理大概是这样：
代理服务器和访问源（请求端）是同源的，但和被访问服务器（资源端）是不同源的，但服务器之间的访问不受浏览器同源策略的影响(即不必担心是否有跨域问题)，那么我们即可请求到同源服务器上的从被访问服务器上的获取到的请求资源了 ；
这样配置完成后，我们发起的每次http请求的Request Url的前面一部分都会和我们本地的源一样；
举例：
我们项目跑在开发环境下的 http://localhost:8080 上，那么上述请求的Request Url的就是 http://localhost:8080/api/bookCate ;这应该就是我们的代理服务器中该资源的地址，与客户端同源；而数据的实际来源则是 http://219.216.5.26:8080/api/bookCate ，这样即实现代理跨域；
目前猜测这个代理服务器可能是Node；
nginx 版本： 1.16.1
修改 nginx.conf 文件下的 serve 下配置：
举例：
生产环境下的,我们项目跑Nginx服务器监听的 http://localhost:8088 上，那么上述请求的Request Url的就是 http://localhost:8088/api/bookCate ;
这应该就是我们的代理服务器中该资源的地址，与客户端同源；
而数据的实际来源则是 http://219.21.5.5:9903/api/bookCate ，这样即实现代理跨域；
Ⅶ 在vue项目中配置proxy解决跨域问题
1.问题：
后端给的接口是：https://stg-pteppp.leanapp.cn/h5/jsconfig.前端在本地开发中调用该接口跨域。
2.解决方案：
* 在webpack中配置proxy。如下图所示
如上：
1. target是你要代理的域名，必须要加上http。
2. 这里用'/api'代替target里面的地址，组件中调用接口时直接用'/api'代替。比如我要调用'https://xxx.com/news.直接写'/api/news'即可
3. changeOrigin必须为true
* 在页面中请求写法如下：
开心吧。数据终于拿到啦！！！
我们知道，vue2.0项目中的static文件夹存储的是静态资源，可以直接被访问到的，如果我们将mock的数据放入static文件夹，在浏览器中直接访问http://localhost:8080/static/json/list.json发现是可以访问到数据的。于是我们在页面将mock数据的请求写成下面这样：
则需要在webpack中做如下配置：
注意这里的http一定不能省略，否则数据请求不到。这样做的好处是在本地开发时mock的接口和线上的接口一致，避免上线前大量改动接口名称。
Ⅷ vue-cli跨域 vue使用axios请求接口怎么操作
全局使用Axios
首先，颤晌在自己建的公用方法的文件中new一个新的HttpUtil.js文件。以下为茄拿锋HttpUtil.js的内容：
var axios = require('axios')// 配置项目根如路径var root = 'http://localhost:8090/manage'// axios请求function httpApi (method, url, params) { return new Promise((resolve, reject) => { axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }).then(
(response) => {
resolve(response)
}
).catch(
(error) => {
reject(error)
}
)
})
}// 返回在vue模板中的调用接口export default { get: function (url, params) { return httpApi('GET', url, params)
}, post: function (url, params) { return httpApi('POST', url, params)
}, put: function (url, params) { return httpApi('PUT', url, params)
}, delete: function (url, params) { return httpApi('DELETE'敏祥, url, params)
}
}
Ⅸ vue.js不使用手脚架如何跨域请求接口
这个问题问的很不世灶谈明确，搜碰只能进行猜测。
跨域的问题，对于老手而言，不是问题，那么我猜你应该是本地开发遇见了问题，因为在本地浏览器的开发可能辩亮会因为浏览器的安全策略遇见跨域问题。
最简单的方法去把对应的包下载下来本地调用，你可以直接去官网或者是 GitHub 上下载。
如果是 Chrome 浏览器解除跨域限制的话：
先新建一个目录，例如：C:MyChromeDevUserData
再新建一个 chrome 浏览器的快捷方式，推荐取名为“chrome-debug”作为区分，右击它然后在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:MyChromeDevUserData，这里--user-data-dir 的值就是刚才新建的目录。
点击应用和确定后关闭属性页面，并打开chrome浏览器。再次打开chrome，发现有“--disable-web-security”相关的提示，说明chrome又能正常跨域工作了。
跨域成功后，而稍微想一想，C:MyChromeDevUserData其实就是新建一个新的用户目录，然后你使用这个解除了安全限制的新用户去进行开发，但注意不要用来上网。
如果是 Firefox 浏览器解除跨域限制的话：
地址栏输入 about:config
将 security.fileuri.strict_origin_policy 改为 false
将 security.mixed_content.block_active_content 改为 false
注：浏览器可能会对自己的安全策略升级，我只能保证第一种和第二种方法都是近期可用的。
其次，比较小的可能是想知道如何进行跨域，这种方法就超多，而且写太长也不好，我只推荐你自己去 MDN 网上面去搜索“跨域”。
Ⅹ vue跨域解决方法
vue跨域解决方法
使用axios请求
第一步骤
在vue.config.js 文件中 mole.exports = { } 中添加
devServer: {
proxy: {
'/profile': { //指定 路径 要 跨域请求地址
// 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
// 将/api开头的url转发到target上。
target: ' https://sso.www.eee.cn/profile',// 跨域请求地址
changeOrigin: true, //虚拟的站点需要更管origin
ws: true, // 代理websockets
secure: true, // 如果是https接口，需要配置这个参数
pathRewrite: {
// 顾名思义，将/api重写为 / 此时url变为 http://192.168.101.110:8888/ 而不是 http://192.168.101.110:8888/api
'^/profile': ''
}
}
}
第二步骤
在封装axios请求中设置
const service = axios.create({
baseURL: '/profile',//定义要跨域的接口路径
withCredentials: true,//是否支持跨域
timeout: 500000, // request timeout
headers: {
'Cache-Control': 'no-cache',
'Content-Type': 'application/x-www-form-urlencoded'
}
});