vue+axios跨域解决方法

通过这种方法也可以解决跨域的问题。

使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

例如请求的url:“http://f.apiplus.cn/bj11x5.json

1、打开config/index.js,在proxyTable中添写如下代码:


1

2

3

4

5

6

7

8

9

proxyTable: { 

  ‘/api‘: {  //使用"/api"来代替"http://f.apiplus.c" 

    target: ‘http://f.apiplus.cn‘, //源地址 

    changeOrigin: true, //改变源 

    pathRewrite: { 

      ‘^/api‘: ‘http://f.apiplus.cn‘ //路径重写 

      

  

}

2、使用axios请求数据时直接使用“/api”:


1

2

3

4

getData () { 

 axios.get(‘/api/bj11x5.json‘, function (res) { 

   console.log(res) 

 })

通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:


1

2

3

4

5

let serverUrl = ‘/api/‘  //本地调试时 

// let serverUrl = ‘http://f.apiplus.cn/‘  //打包部署上线时 

export default { 

  dataUrl: serverUrl + ‘bj11x5.json‘ 

}

调试时定义一个serverUrl来替换我们的“/api”,最后打包时,只需要将“http://www.xxx.com”替换这个“/api”就可以了。

原网址:https://www.cnblogs.com/wangyongcun/p/7665687.html

原文地址:https://www.cnblogs.com/stylesu/p/9100265.html

时间: 2024-10-12 13:21:04

vue+axios跨域解决方法的相关文章

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

跨域解决方法

跨域解决方法: 1.利用后端 ①设置头信息 ②后端代理 2.flash代理 3.jsonp 在js中找到一个代理 ①能够访问网络资源,并且不会有跨域问题 ②获取到资源数据可以给js使用 var oScript = document.createElement('script'); oScript.src = 'data.php'; document.body.appendChild(oScript); IE解决$.ajax() 跨域 $.support.cors = true;

ajax 跨域解决方法

最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax本身是不支持跨域的,这是由于javascript的同源策略所导致.但是我们可以通过其他方法来解决ajax的跨域问题. 1  由于我们是利用了jquery来写的ajax,我们一开始是准备 利用jsonp来解决的,客户端类似下面写法 $.ajax({ type : "get", async:false, url : "http://w

JavaScript跨域解决方法大全

跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过"URL的首部"字符串进行识别,"URL的首部"指window.location.protocol +window.location.host,也可以理解为"Domains, protocols and ports must match".实际上,同源策略就是浏览器的一种保护机制,只要请求双方的URL协议.域名(主机).端口有任何一个不同,都被当作是跨域.

vue跨域解决方法 及设置api路径方法

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报"No 'Access-Control-Allow-Origin' header is present on the requested resource." 这种跨域错误. 要想本地正常的调试,解决的办法有三个: 一.后台更改header 1 2 header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Con

Js跨域解决方法总结

本文转载自网易博客 出于安全性的考虑,在AJAX应用中,浏览器通常都会限制跨域提交数据.但由于经常和其他部门有接口对接的业务需求,需要跨域获取数据. IE对于跨域访问的处理是,弹出警告框,提醒用户.如果用户将该网站纳入可信任网站,或者调低安全级别,那么这个问题IE就不会在提醒你.    FireFox等其它非微软的浏览器遇到跨域访问,则解决方案统一是拒绝访问. Huodong.qq.com 下的网站前端要获取act.qzone.qq.com下的接口数据 有3种解决方法 1.服务器端做代理 服务器

ajax原理和跨域解决方法

ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动  获取XMlHttpRequest对象             2--open 打开url通道,并设置异步传输              3--send 发送数据到服务器             4--服务器接受数据并处理,处理完成后返回结果              5--客户端接收服务器端返回

[跨域]跨域解决方法之Ngnix反向代理

跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介绍Ngnix之前,我么先来介绍下代理是什么~ 代理相当于中间人,中介的概念 代理分为正向代理和反向代理.(PS:本文介绍的解决跨域方法用的是反向代理) 正向代理:现在客户端发送一个请求给服务端,可是该客户端没有访问权限,于是只能交给一个代理服务器来转交该客户端的请求给服务端响应. 客户端知道请求资源地址,也能感知代理服务器的存在. 反向代理:客户端发送一个请求,代理服务器收到这个请求,判断到这个请

请求跨域解决方法CORS

CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源. Origin表示本域,也就是浏览器当前页面的域.当JavaScript向外域(如sina.com)发起请求后,浏览器收到响应后,首先检查Access-Control-Allow-Origin是否包含本域,如果是,则此次跨域请求成功,如果不是,则请求失败,JavaScript将无法获取到响应的任何数据. 简单请求包括GET.HEAD和POST(POST的Content-Type类型 仅