vue解决开发跨域、生产跨域的解决思路_（面试八股文）

shmily_yyA

已于 2023-01-05 23:01:58 修改

阅读量960

点赞数

分类专栏： _http 文章标签：前端

于 2023-01-05 23:00:26 首次发布

本文链接：https://blog.csdn.net/shmilynn_/article/details/128570155

版权

_http 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、形成跨域的原因

跨域是违背了浏览器的一种同源策略，简单来说就是浏览器一种自我保护机制

http - localhost - 8080

协议 - 域名 - 端口号

只要我们的协议、端口号、域名有一个不同就会形成跨域

我们的请求发送出去，服务器接收到了这次请求，并且把响应发送给我们的本地，但是浏览器检测到了跨域，就被浏览器拦截不会给到本地，我们也就接受不到响应了。

二、跨域的解决方案

生产跨域

jsonp解决跨域

主要利用script标签同源策略的漏洞，来实现跨域的，

在script的src上写我们要跨域的地址，前端通过callback声明好一个函数，后端返回执行函数。执行函数参数中携带所需的数据，这个函数需要前后端去协商处理

我们可以引入一个vue-jsonp的插件来动态创建Script，动态拼接url，进而抓取数据，实现跨域，但是jsonp只能发起get请求

cors 配置跨域

ORS（Cross-Origin Resource Sharing）是一个W3C标准，全称“跨域资源共享”

主要后端在请求头中进行配置

"Access-Control-Allow-Origin", "开启全部允许" 来解决跨域

nginx配置反向代理服务器

nginx主要是通过检测url前缀，把http请求转发给后端真实物理服务器，在通过rewrite去掉前缀

开发跨域

通过vue_cli 配置代理服务器

我们可以通过在vue.config.js中进行配置

devServer：{

proxy：'请求路径'

}

去开启一个代理服务器

方法一：

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
        proxy:'http://localhost:5000'
    }
  }
})

缺点：

这种方式只能配置一个代理，也就是只能给5000发请求，

也不能灵活的去配置走不走代理，优先匹配前端资源，比如说我们本地的public文件夹下有一个text文件，

那我们去请求'http://localhost:5000/text'的话就只会从本地读取，而不会去请求服务器

方式二：

同样是在vue.config.js中进行配置如下

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    proxy: {
      '/ips': {
        target: 'http://www-wms-java.itshmily.net', // 接口地址
        pathRewRite:{'^/ips':''}                   // 路径重写
        changeOrigin: true,                        // 用于控制请求头中的host值
      },
     '/aps': {
        target: 'http://www-wms-java.itshmily.net', // 接口地址
        pathRewRite:{'^/aps':''}                   // 路径重写
        changeOrigin: true,                        // 用于控制请求头中的host值
      },
    }
  }
})