解决跨域的方案：JSONP，cors方式，vue-cli反向代理（最常用的方法）

idiot_MAN

已于 2022-10-29 10:23:51 修改

阅读量296

点赞数

分类专栏：前端 vue2 文章标签： vue.js javascript 前端

于 2022-10-19 10:31:30 首次发布

本文链接：https://blog.csdn.net/idiot_MAN/article/details/127403005

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

20 篇文章 1 订阅

订阅专栏

JSONP，cors方式，vue-cli反向代理（最常用的方法）

文章目录

JSONP，cors方式，vue-cli反向代理（最常用的方法）

JSONP

核心思想：网页通过添加一个script元素，向服务器请求 JSON数据，服务器收到请求后，将数据> 放在一个指定名字的回调函数的参数位置传回来。

原理：

客户端利用 script 标签的 src 属性，去请求一个接口，因为 src 属性不受跨域影响。
服务端响应一个字符串
客户端接收到字符串，然后把它当做 JS 代码运行。
vue.js中的代码

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

cors方式

前端什么也不用做
后端需要开启cors
CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

解决跨域----反向代理

vue-cli的使用

npm install -g @vue/vli  (一次安装)

vue --version (查看版本)

vue create myapp (创建项目)

npm run serve (开发环境构建)  

npm run build (生产环境构建)

npm run lint (代码检测工具 )

Proxy（代理）

通过启动本地服务器进行代理转发目标服务器。而跨域只针对于浏览器，对于node服务发出的请求是不会出来跨域的，从而解决了跨域的问题。
在vue.config.js文件
Vue.config.js的配置(配置反向代理)----在module.exports中

deSever:{
    proxy:{
		'/api':{
			target:'https://xxxxxx.com', //请求后台链接
			changeOrigin:true   //允许跨域
		}
    }
}

自定义一个开口路径：

deSever:{
    proxy:{
		'/yuanrun':{
			target:'https://xxxxxx.com',   //请求后台链接
			changeOrigin:true,   //允许跨域
			pathRewrite:{
				'^/yuanruan':''  //路径重启---将自定义路径yuanrun替换成空字符串，达到的效果一样
			}
		}
    }
}