由于浏览器的同源策略会导致跨域,同源策略又分为
一:DOM同源策略:禁止对不同源页面的DOM进行操作,主要是不同域名的ifram是限制互相访问的
二:xmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起http请求,只要域名 协议 端口有一个不同都被当做不同的域之间的请求,即跨域请求
解决方式:
1、CORS跨域资源共享 后端需要设置Access--Control-Allow-Credentials:true
2、jsonp实现跨域:动态创建script,利用src属性进行跨域
3、 nginx代理跨域
4、nodejs中间件代理跨域
5、WebSokect协跨域
6、window.name+ifram跨域
7.proxy(反向代理)
官网:接口 : https://news-at.zhihu.com/api/4/news/latest
7.1 : 先安装: `yarn add http-proxy-middleware`
7.2创建一个文件 `src/setupProxy.js
7.3. 配置(草稿)
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
pathRewrite: {
'^/mgapi': ''
},
changeOrigin: true,
// 为了 https 使用
secure: false
})
)