问题:

在项目中需要需要讲本地项目去请求一个URL接口获取数据 例如:

本地请求地址:http://127.0.0.1:19323/site/info.json
请求Url地址:http://www.v2ex.com/api/site/info.json

那么如何让本地的请求转换乘正确的请求地址URL呢?

首先请检查下你的 Vue 版本,Vue2 和 Vue3 跨域方式不同:

$ vue -V
2.X or 3.X

一、Vue2 版本

这里以访问 Ve2x 的一个公告API为例,直接访问如下:

this.$axios.get("https://www.v2ex.com/api/site/info.json")
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})

当我们运行程序后,控制台报错如下:

可以看到浏览器拦截了我们的请求,因为我们跨域了,下面解决跨域问题。

Step1:配置BaseUrl

首先在main.js中,配置下我们访问的Url前缀:

import Vue from 'vue'
import App from './App'
import Axios from 'axios' Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json'; Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

关键代码是:Axios.defaults.baseURL = '/api',这样每次发送请求都会带一个/api的前缀

Step2:配置代理

修改config文件夹下的index.js文件,在proxyTable中加上如下代码:
'/api':{
target: "https://www.v2ex.com/api",
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}

Step3:修改请求Url

修改刚刚的axios请求,把url修改如下:

this.$axios.get("/site/info.json")
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})

Step4:重启服务

重启服务后,此时已经能够访问了:

原理:

因为我们给url加上了前缀 /api,我们访问 http://127.0.0.1:19323/site/info.json 就当于访问了:http://127.0.0.1:19323/api/site/info.json。(假设本地访问端口号为 19323)

又因为在 index.js 中的 proxyTable 中拦截了 /api ,并把 /api 及其前面的所有替换成了 target 中的内容,因此实际访问 Url 是https://www.v2ex.com/api/site/info.json。

二、Vue3 版本

升级到 Vue3 后,会发现 Vue2 中存放配置的 config 文件夹没有了,大家不要慌张。可以在 package.json 文件的同级目录下创建 vue.config.js 文件。给出该文件的基础配置:

module.exports = {
outputDir: 'dist', //build输出目录
assetsDir: 'assets', //静态资源目录(js, css, img)
lintOnSave: false, //是否开启eslint
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: '',
https: false, //是否使用https协议
hotOnly: false, //是否开启热更新
proxy: null,
}
}

Vue3 解决跨域,内容只有第二步配置代理 和 Vue2 不同,其他的一致。

Step2:配置代理

修改 vue.config.js 中 devServer 子节点内容,添加一个 proxy

devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: '8081',
https: false,
hotOnly: false,
proxy: {
'/api': {
target: 'https://www.v2ex.com/api', //API服务器的地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
}

当然还有一种方式,将本地的Localhost的host地址直接转请求url

改编转载:https://blog.csdn.net/yuanlaijike/article/details/80522621

Axiso解决跨域访问的更多相关文章

  1. Axiso解决跨域访问(...XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'...)

    直接访问如下:this.$axios.get("http://localhost:8089/yc/demo").then(res=>{    console.log(res) ...

  2. springboot 前后端分离开发解决跨域访问

    最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...

  3. 用jQuery与JSONP轻松解决跨域访问的问题【转】

    原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...

  4. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  5. C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题

    客服端:      在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...

  6. spring boot 解决跨域访问

    package com.newings.disaster.shelters.configuration; import org.springframework.context.annotation.B ...

  7. CORS解决跨域访问问题

    简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. Tomcat下的配置   下载cors-filter-1.7.jar,java-property-utils-1.9.jar  [下载 ...

  8. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

  9. MVC上的jsonp扩展,解决跨域访问问题

    总是有人会遇到跨域问题,然后有个jsonp的解决方案,MVC中代码如下: public class JsonpResult : System.Web.Mvc.JsonResult { object d ...

随机推荐

  1. 使用 UIStoryBoard 语法糖

    最后更新: 2018-09-06 当你用 UIStoryBoard (以下简称 'SB') 做iOS开发时候,总是避免不了设置 StoryBoard ID 的问题, StoryBoard ID 是一个 ...

  2. http三次握手,四次挥手

    本文经过借鉴书籍资料.他人博客总结出的知识点,欢迎提问 序列号seq:占4个字节,用来标记数据段的顺序,TCP把连接中发送的所有数据字节都编上一个序号,第一个字节的编号由本地随机产生:给字节编上序号后 ...

  3. [CSP-S模拟测试]:格式化(贪心)

    题目传送门(内部题105) 输入格式 每组数据第一行一个正整数$n$,表示硬盘块数,接下来$n$行,每行两个正整数,第一个正整数为硬盘格式化前的容量,第二个正整数为格式化之后的容量. 输出格式 对每组 ...

  4. 关于MySQL 中 EXISTS 的用法

    在MySQL中 EXISTS 和 IN 的用法有什么关系和区别呢? 假定数据库中有两个表 分别为 表 a 和表 b create table a ( a_id int, a_name varchar( ...

  5. @清晰掉 makefile

    参阅: http://www.cnblogs.com/wang_yb/p/3990952.html

  6. 【机器学习速成宝典】模型篇02线性回归【LR】(Python版)

    目录 什么是线性回归 最小二乘法 一元线性回归 多元线性回归 什么是规范化 Python代码(sklearn库) 什么是线性回归(Linear regression) 引例 假设某地区租房价格只与房屋 ...

  7. JavaScript apply

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply The ...

  8. 移动Anaconda安装目录后导致图标变白以及Anaconda Navigator,Anaconda Prompt,jupyter notebook和spyder启动不了的解决方法

    Q:因为移动了Anaconda3的安装目录,所以Anaconda3的相应应用程序启动不了,包括图标也会变白 解决方法:修改对应快捷键的属性,有对应的启动位置,修改下位置路径配置以及图标(Anacond ...

  9. element 库 date-picker 的 disabledDate 的坑

    概述 今天使用 element 库的 date-picker 组件,使用日期范围,然后使用了 disabledDate 属性,把 2018 年 1 月和 2020 年 12 月之后的日期全部 disa ...

  10. 系统分析与设计HW1

    软件工程的定义 1993年,电气电子工程师学会(IEEE)给出了一个定义:"将系统化的.规范的.可度量的方法用于软件的开发.运行和维护的过程,即将工程化应用于软件开发中". 阅读经 ...