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-Control-Allow-Method:POST,GET‘);//允许访问的方式   
这样就可以跨域请求数据了。

二、使用JQuery提供的jsonp  (注:vue中引入jquery,自行百度)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
methods: {
  getData () {
    var self = this
    $.ajax({
      url: ‘http://f.apiplus.cn/bj11x5.json‘,
      type: ‘GET‘,
      dataType: ‘JSONP‘,
      success: function (res) {
        self.data = res.data.slice(0, 3)
        self.opencode = res.data[0].opencode.split(‘,‘)
      }
    })
  }
}
  

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

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

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

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

proxyTable: {
  ‘/api‘: {  //使用"/api"来代替"http://f.apiplus.c"
    target: ‘http://f.apiplus.cn‘, //源地址
    changeOrigin: true, //改变源
    pathRewrite: {
      ‘^/api‘: ‘http://f.apiplus.cn‘ //路径重写
      }
  }
}
2、使用axios请求数据时直接使用“/api”:

getData () {
 axios.get(‘/api/bj11x5.json‘, function (res) {
   console.log(res)
 })
通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:

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/qq735675958/p/8566305.html

时间: 2024-10-08 23:41:34

vue跨域解决方法 及设置api路径方法的相关文章

JavaScript跨域解决方法大全

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

跨域解决方法

跨域解决方法: 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

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be

spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE b

js 利用iframe和location.hash跨域解决办法,java图片上传回调JS函数跨域

奶奶的:折腾了我二天,终于解决了!网上有很多例子. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 测试通过 js :这个主页面,部分代码, function submitUpload(id){ $("#imgSrc" + id +"").attr("alt", "图片上传中--"); var imgID = id; if(id>0){ imgID = 1; } var for

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&quo

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--客户端接收服务器端返回