Axiso解决跨域访问
问题:
在项目中需要需要讲本地项目去请求一个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解决跨域访问的更多相关文章
- 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) ...
- springboot 前后端分离开发解决跨域访问
最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
- spring boot 解决跨域访问
package com.newings.disaster.shelters.configuration; import org.springframework.context.annotation.B ...
- CORS解决跨域访问问题
简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. Tomcat下的配置 下载cors-filter-1.7.jar,java-property-utils-1.9.jar [下载 ...
- 深入了解jsonp解决跨域访问
在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...
- MVC上的jsonp扩展,解决跨域访问问题
总是有人会遇到跨域问题,然后有个jsonp的解决方案,MVC中代码如下: public class JsonpResult : System.Web.Mvc.JsonResult { object d ...
随机推荐
- 满减 HRBUST - 2455
https://vjudge.net/problem/HRBUST-2455 有两种优惠方式,一是满400减100,另外一种是商品自带折扣,二者不可叠加 dp[i][j]表示前i种商品,(参与满400 ...
- sqli-lab(37)
0X01 看看源码 what is mean? 定义和用法 mysql_real_escape_string() 函数转义 SQL 语句中使用的字符串中的特殊字符. 下列字符受影响: \x00 \n ...
- nodejs 简单的搭建一个服务器
前言: nodejs 主要是后台语言 node 是在终端运行的,所以他可以进行 dos 命令 模块 自定义 JavaScript 是前台语言 nodejs 是 也是使用我们的 JavaScript ...
- linux C 加载so文件 指定路径
在Linux C中动态加载.so文件用dlopen("libdemo.so", RTLD_NOW); 但是默认的so搜索目录不包括当前程序目录,所以必须复制到系统的so目录 才能运 ...
- C:\WINDOWS\system32\drivers\etc\hosts文件的作用
在网络上访问网站,要首先通过DNS服务器把网络域名(www.XXXX.com)解析成XXX.XXX.XXX.XXX的IP地址后,我们的计算机才能访问.要是对于每个域名请求我们都要等待域名服务器解析后返 ...
- set_option()函数
这个函数用于设置dataframe的输出显示, import pandas as ps pd.set_option('expand_frame_repr', True) # True就是可以换行显示. ...
- Delphi DbgridEh实现鼠标拖动选中列,并使复选框选中
1.先设置表格列的属性 procedure TForm_TaskToDW.InitGrid;var MyCol: TColumnEh;begin with DBGridEh_Task do be ...
- 【Qt开发】解决Qt5.7.0中文显示乱码的问题
[Qt开发]解决Qt5.7.0中文显示乱码的问题 亲测可用: 乱码主要是编码格式的问题,这里可以通过Edit菜单中选择当前文档的编码方式,选择按照UTF-8格式保存,然后输入对应的中文,保存,然后运行 ...
- 20191127 Spring Boot官方文档学习(4.11)
4.11.使用NoSQL技术 Spring Data提供了其他项目来帮助您访问各种NoSQL技术,包括: Redis MongoDB Neo4J Solr Elasticsearch Cassandr ...
- c++ 加载库错误问题解决
转载自:http://blog.csdn.net/sahusoft/article/details/7388617 一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误, 比如: ...