vue 跨域  springCloud @CrossOrigin注解

一丶什么是跨域

跨域问题来源于浏览器的同源策略,浏览器为了提高网站的安全性,在发送ajax请求时,只有在当前页面地址与请求地址的协议+域名+端口号相同时才允许访问,否则会被拦截。

协议即通信协议,比如我们现在常见的http和https,如果当前页面地址使用http协议,请求的地址使用https协议,那么这个请求就存在跨域问题。

域名即网站网址,如baidu.com,360.com存在跨域

端口号即域名对应的服务器的监听端口,这个我们一般是看不到的,因为一般服务器都使用80端口,浏览器默认为80端口,所以不需要在域名后再写出端口号。当8080端口发出的请求为80端口时,也存在跨域

当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了

在前后端分离后,请求数据时跨域问题出现的越来越多,如何解决呢?

二丶如何解决跨域问题

1.使用jsonp实现,网页通过script标签向服务器请求json数据,服务器受到请求后,将数据放在一个指定名字的回调函数的参数里面传给前端。

<script src="http://www.test.com/getData?callback=getData"></script>
// 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字 // 处理服务器返回回调函数的数据
<script type="text/javascript">
// 服务器返回的数据会放到回调函数里面
function getData(res){
// 处理获得的数据
console.log(res.data)
}
</script>

2.使用Jquery ajax实现,

$.ajax({
url: 'http://www.test.com:8888/getData',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "handleCallback", // 自定义回调函数名
data: {}
})

  3.在vue开发中实现跨域:

proxy中设置跨域vue -->config--> index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path') module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../manage/index.html'),
assetsRoot: path.resolve(__dirname, '../manage/'),
assetsSubDirectory: 'static', assetsPublicPath: './',
productionSourceMap: true, productionGzip: false,
productionGzipExtensions: ['js', 'css']
},
dev: {
env: require('./dev.env'),
port: 8088,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
// target: 'http://10.9.65.114:8005', // target: 'http://10.9.240.3:8020',
// DAT
target: 'http://10.9.240.9:8020',
// Localhost
// target: 'http://10.9.240.14:8020',
pathRewrite: {
'^/api': '/'
}
}
}, cssSourceMap: false
}
}

  在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器。

以下是我在开发vue项目中实现跨域的步骤:

  1.在proxy中设置要访问的地址,并重写/api为空的字符串,因为我们真正请求的地址是没有带/api,这个重写很重要!!!

  2.在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了。

  3. 假如请求的真正地址为:http://121.121.67.254:8185/core/getdata/userInfo,但我们在浏览器上会看到是这样的: http://localhost:8080/api/core/getData/userInfo ,多了个/api,但并不影响我们请求数据。

三丶自己项目用处

三丶参考:vue中config/index.js:配置的详细理解

https://www.cnblogs.com/yangguoe/p/9293892.html

https://www.cnblogs.com/lihaohua/p/12372267.html

vue 跨域 springCloud @CrossOrigin注解的更多相关文章

  1. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  2. vue跨域问题解决(生产环境)

    vue跨域问题解决(使用webpack打包的) 配置代理:(config下index.js文件) module.exports = { dev: { env: require('./dev.env') ...

  3. vue跨域处理

    本人对于vue跨域处理流程不是很清楚,特此理顺一遍. 1.在config中进行配置,该文件不是都存在,需要自己建: proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化 ...

  4. vue 跨域问题

    前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配置,却不起作用. import org.springframework.context.annotation.Con ...

  5. .net core webapi+vue 跨域访问

    最近在做一个前后端分离的示例,以下代码完美解决跨域的问题 一.后端服务 1.首先我们建一个.net core webapi的项目 2.项目引用Microsoft.AspNetCore.Cors 包 3 ...

  6. vue跨域代理配置

    实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...

  7. 解决vue跨域axios异步通信

    在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求 ...

  8. vue跨域访问

    第一次创建vue项目,画完静态页面一切顺利,准备和后台进行联调,问题来了,无论怎么调试使用Axios,jQuary还是使用原生的Ajax请求都访问不通(前提条件,另外一个人的电脑当成服务器,进行访问) ...

  9. c# vue 跨域get post cookie等问题

    背景介绍: 开发微信公共号时前后端分离,后台用C#开发,前端使用vue框架,数据采用axios传输 具体问题: 1:前后端分离造成的跨域访问问题 2:跨域后cookie传输和设置问题 解决方案: 1: ...

随机推荐

  1. 拦截导弹(CDQ分治,DP)

    很好的题,值得细细说,(果然又是个假期望)....... 首先我们提取信息,显然这是个三维偏序问题 用简单的DP式子表示需要满足 f[i]=max(f[1--j]+1)(v[j]<v[i],h[ ...

  2. NOIP模拟测试8「寿司」

    考试时打的类似$n^2$暴力,然后炸了只有10分 后来验证我的算法伪了. 题解 显然你有一种解法,假设你要在一个B点断开将R分别移向最左 最右,这样只用分别计算B点右面蓝色数量左面蓝色数量就得到了一个 ...

  3. 【题解】滑雪 luogu1434 记忆化搜索

    记忆化搜索入门题 题目 Michael喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道在 ...

  4. AS打包签名

    1.进入项目,然后点击菜单栏的Build  -->Generate  Signed APK... (如下图所示) 2.点击之后会出现下图,我这个是我以前有过KEY了,如果你以前没有过的话,都是空 ...

  5. 《MySQL面试小抄》索引考点二面总结

    <MySQL面试小抄>索引考点二面总结 我是肥哥,一名不专业的面试官! 我是囧囧,一名积极找工作的小菜鸟! 囧囧表示:小白面试最怕的就是面试官问的知识点太笼统,自己无法快速定位到关键问题点 ...

  6. React 开发环境准备

    1. 使用reactjs,一般有以下两种方式: (1)通过script标签引入reactjs.这种方式不推荐使用,如果我们的项目比较大,就需要对项目进行拆分,于是页面就需要通过script标签引入很多 ...

  7. 铂金07:整齐划一-CountDownLatch如何协调多线程的开始和结束

    欢迎来到<并发王者课>,本文是该系列文章中的第20篇. 在上一篇文章中,我们介绍了Condition的用法.在本文中,将为你介绍CountDownLatch的用法.CountDownLat ...

  8. 一文带你了解.Net信号量

    本文主要讲解.Net基于Semaphore带大家了解信号量 信号量举例 大家去银行去银行取钱,互斥锁管理的时一个柜台是否正在处理业务,而信号量管理的是整个柜台是否正在处理业务,每当有一个柜台处理完成之 ...

  9. error C3646: 未知重写说明符

    记录一个报错 error C3646: 未知重写说明符 ①循环引用 在项目文件变多时,由于组织不当,很容易出现头文件的循环引用 有时候虽然没有出现循环引用,但是头文件多处被include :适当的使用 ...

  10. 资源:Kafka消息队列下载路径

    Kafka下载路径 http://kafka.apache.org/downloads.html