vue提示跨域应该怎么解决 - web建站教程手机端

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，我们会在看到邮件的第一时间内为您处理！