前言:
在此之前,我们应该知道什么是跨域?和为什么会跨域?以及跨域的基本解决方法.
同时扩展在vuecli开发环境如何用代理服务器解决跨域问题
一、跨域:
1.跨域的理解
跨域即网页所在url(浏览器地址栏的地址)的协议, 域名, 端口号, 和Ajax请求url的协议, 域名, 端口号有任一对应不上的情况就发生跨域.跨域是是浏览器对ajax做出的限制.
2.出现跨域的报错展示
二、解决跨域问题(CORS/JSONP )
1.CORS(需要后端大佬实现)
1.1cors原理
通过服务器设置响应头为: Access-Control-Allow-Origin: *
只有后端大哥才能开启cors,这样前端才能得到跨域请求的权限
1.2方法:
下载安装cors:
npm i cors
加载cors:
const cors = require('cors')
注册中间件
app.use(cors())
1.3查看是否有cors
2.jsonp方式
注意:jsonp和json没有一毛钱关系,不要混淆二者哦~同时jsonp值只支持GET请求
2.1、jsonp原理(前端+后端)
跨域是浏览器对ajax的限制,jsonp解决跨域的原理正是避开浏览器,利用script的src属性发送请求,
2.2、代码实现原理
- 前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据
- 后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行
- 调用函数名, 并传递数据
//client客户端
<script>
function abc(res){
console.log(res)
}
</script> -->
<!--
前端:json的做法
原理:script的src请求,不会受到跨域的限制
缺点:只能发起GET方式的请求
-->
<script src="http://localhost:6900/api/goodsList?callback=abc"></script>
//server服务端
// 导入express
const express = require('express')
const app = express()
app.get('/api/goodsList', (req, res) => {
// 1 拿到前端的方法名
console.log(req.query.callback)
// 2 拼接返回给前端script内执行的js代码字符串
let fn = req.query.callback
let arr = JSON.stringify(["santa", "claus"])
let resStr = fn + `(${arr})`
// 数组字符串拼接 + 让数组变成字符串(里面字符串双引号里面的值,就变成了没有引号的变量)
// 3 把js代码字符串返回给前端script标签
res.send(resStr)
})
app.listen('6900', () => {
console.log('请访问:http://localhost:6900')
})
2.3开发中利用jquery实现
<!-- 练习:工作中使用jsonp -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$.ajax({
url:'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34835,34948,34068,31254,34711,34584,34504,34710,34917,34579,34813,26350,34972,34867,22157,35018&wd=santa&req=2&csor=5&pwd=sant&_=1636016480505',
dataType:'jsonp',//(关键代码)要设置jsonp,jquery封装ajax方法内就不会使用默认ajax请求了,而是换成动态创建script标签发送src请求
json:'cb',
success: res => {
// jsonp => jquery内部会创建一个方法,接收后端返回的数据后,再调用success把后端的值传给你
console.log(res)
}
})
</script>
思考:
如果我们只有后端的接口地址,后端jsonp也不没有cors也没有,我们应该怎么办呢?比如:我们想访问网易新闻的的接口,但是网易的后端我们根本接触不到,那我们如何获取数据呢?
答案:用代理服务器解决跨域问题。我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址
三、uecli脚手架环境用代理服务器解决跨域
vuecli脚手架, 启动的webpack开发服务器,就能做代理转发 ,我们只需要修改webpack开发服务器的配置即可
3.1跨域的情况
3.1.1动手试试
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1.先 npm i axios 下载axios包
// 2.引入axios
import axios from 'axios'
Vue.config.productionTip = false
// 3.发送axios请求
axios({
url: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html'
}).then(res => {
console.log(res)
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.2、使用代理服务器效果
数据请求成功
3.3动手试试
3.3.1.vue.config.js配置
module.exports = {
devServer: {
proxy: {
// http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
'/api': { // 请求相对路径以/api开头的, 才会走这里的配置
target: 'http://c.m.163.com', // 后台接口域名
changeOrigin: true, // 改变请求来源(欺骗后台你的请求是从http://c.m.163.com)
pathRewrite: {
'^/api': '' // 因为真实路径中并没有/api这段, 所以要去掉这段才能拼接正确地址转发请求
}
}
//代码流程分析
/*
前端发起请求->请求后端接口->接口地址/api/nc/article/headline/T1348647853363/0-40.html->
/api 开头命中配置项proxy中 "/api" 触发target ->拼接后台接口域名 形成
=>http://c.m.163.com/api/nc/article/headline/T1348647853363/0-40.html
但是由于后端实际请求地址不应该有/api 字段,所以要重写路径,利用pathRewrite属性去除/api
==>后台地址+正确的接口地址
注意:
1.是否需要去除命中项(pathRewrite)要根据项目实际情况,/api也可以成其他单词字段,代码相对应就可以了
2.如果项目中有配置基地址则执行过程是:
发请求
->配置基地址
->基地址+接口地址拼接
->命中proxy的配置项
->最后拼接后台域名
==>后台地址+基地址+接口地址
*/
}
}
}
3.3.2.main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入axios
import axios from 'axios'
Vue.config.productionTip = false
// 发送axios请求
axios({
url: '/api/nc/article/headline/T1348647853363/0-40.html'
}).then(res => {
console.log(res)
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')