vue提示跨域应该怎么解决

771 ℃

vue提示跨域是什么原因,应该怎么解决?下面web建站小编给大家详细介绍一下!

1、什么是跨域

跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的,是浏览器对JS实施的安全限制。

跨域本质是浏览器基于同源策略的一种安全手段。

同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能。

所谓同源(即指在同一个域)具有以下三个相同点:1、协议相同(protocol);2、主机相同(host);3、端口相同(port)。

反之非同源请求,也就是协议、端口、主机其中一项不相同的时候,这时候就会产生跨域。

2、如何解决跨域?

CORS (Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

app.use(async (ctx, next)=> {
  ctx.set('Access-Control-Allow-Origin', '*');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  if (ctx.method == 'OPTIONS') {
    ctx.body = 200; 
  } else {
    await next();
  }
})

代理(Proxy)也称网络代理,是一种特殊的网络服务,允许一个(一般为客户端)通过这个服务与另一个网络终端(一般为服务器)进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。

#vue.config.js

amodule.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8084,
    open: true,// vue项目启动时自动打开浏览器
    proxy: {
      '/api': { // '/api'是代理标识,用于告诉node,url前面是/api的就是使用代理的
        target: "http://xxx.xxx.xx.xx:8080", //目标地址,一般是指后台服务器地址
        changeOrigin: true, //是否跨域
        pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
            '^/api': ""
        }
      }
    }
  }
}
axios.defaults.baseURL = '/api'

HTTP协议中的跨域问题是什么?跨域问题怎么解决?

vue3响应式Proxy与Reflect的正确使用方法

vue3和vue2的响应式有什么区别?

vue项目开发如何解决跨域问题

nodejs如何利用uni-app实现跨域访问

标签: CORS, Proxy, 跨域

上面是“vue提示跨域应该怎么解决”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_2958.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

css3结合svg做一个动态广告
Nginx反向代理的WebSockets安全性的重要性
免费商用中文字体——优设鲨鱼菲特健康体
el-table表头列动态加载后出现页面闪动
wordpress如何让别人复制文章自带版权(非插件)