1.何为跨域
- AJAX跨域问题是指浏览器出于安全考虑，限制了一个源（域名、协议、端口）的脚本与另一个源的资源进行交互。通俗的说，当前页面的域名、协议、端口必须与ajax访问地址一致，才能正常通信，否则会造成跨域
2.解决方案
- 浏览器开放限制：浏览器下载插件（Access-Control-Allow-Origin）
- 代理服务器：在服务器端（前端所在服务器）设置一个代理服务器，所有AJAX跨域请求都发送到这个代理服务器，由代理服务器转发请求到目标服务器，并返回响应，相当于做了一个中转
- CORS：服务器端（接口所在服务器）设置Access-Control-Allow-Origin响应头，允许特定的或所有域进行跨域请求
- JSONP：通过 script 标签的src属性请求一个带参数的服务器端脚本，服务器端脚本输出一个指定函数的调用，该函数的参数是要传递的数据
3.Access-Control-Allow-Origin
-
在chrome应用商店中搜 "cors",找到 "Access-Control-Allow-Origin"
-
点击添加，安装完成后，启用该插件
4.CORS
- http-server：启动时添加 --cors 参数，所有访问这个服务器的请求都允许跨域
http-server -c-1 -p 8097 --cors
- express设置允许跨域
//引入express
const express = require("express")
//创建服务对象
let app = express()
app.all('*', function (req, res, next) {
//跨域允许访问的域名（通配符表示所有域名皆可访问,多个域名用都好隔开）
res.header("Access-Control-Allow-Origin",'*')
//跨域允许的header包含哪些字段
res.header("Access-Control-Allow-Headers","Content-Type,Authorization,X-Requested-With")
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
//执行下一步(跳转到下一个路由判断中)
next()
})
//开启服务，监听80端口
var server = app.listen(80,function(){
//当前当前监听的端口号
var port = server.address().port
console.log(`Server running at http://127.0.0.1:${port}/`)
})
4.代理服务器
- http-server：启动时添加 -P 或者 --proxy 参数，当前服务器不能解析的资源会转交到代理服务器
//启动页面服务器8096，接口代理至8097
http-server -c-1 -p 8096 -P http://127.0.0.1:8097
//接口服务器
http-server -c-1 -p 8097
//页面代码（先访问http://127.0.0.1:8096/data.json,无法解析后再代理至http://127.0.0.1:8097/data.json）
axios({url: "data.json"})
- vue脚手架：配置方式不固定，一切以文档为主，代理配置
//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
devServer: {
//代理
proxy: {
// 匹配以/api开头的所有路径
'/api': {
target: 'http://localhost:8097', // 代理的后端api域名
changeOrigin: true, // 支持跨域
}
}
}
})
<script>
new Vue({
el:"#app",
data: {},
created(){
this.getMsg()
},
methods: {
async getMsg(){
try {
//接口一律访问当前8080服务器，然后自动代理至接口服务器，不得再访问原目标服务器
const result = await axios({
url: "/api/data.json",
//url: "http://127.0.0.1:8097/api/data2.json",//错误写法
})
console.log('success',result.data)
} catch (error) {
console.log('error',error)
}
}
}
})
</script>