跨域问题的解决

最新推荐文章于 2024-03-06 14:51:35 发布

摩羯座**

最新推荐文章于 2024-03-06 14:51:35 发布

阅读量608

点赞数

分类专栏：笔记文章标签： react.js vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_48864616/article/details/123347697

版权

笔记专栏收录该内容

102 篇文章

订阅专栏

跨域
CORS前端最省事，在CORS，前端只需要考虑baseURL和环境变量。
Proxy前端需要在开发环境中配置，还需要在生产环境配置（生产环境一般不需要前端做）
CORS
项目开始前，跟后台要接口地址
开发环境接口

http://192.168.1.xxx:8080

如果这个接口无法访问，超时，我们可以先在cmd中ping一下ip地址

ping 192.168.1.xxx

如果不能ping通，找后台要最新的ip地址
生产环境接口
有可能在项目开发初期，这个地址不存在，我们可以在项目先自定义一个，只有build时才会用到。
创建环境变量
在根目录中创建.env.development、.env.production，在目录中，根据要求填写变量

VUE_APP_BASEURL=开发环境接口地址
VUE_APP_BASEURL=生产环境接口地址

找到配置baseURL的地方

axios.create({
  // vuecli
  baseURL: process.env.VUE_APP_BASEURL,
  // vite
  baseURL: import.meta.env.xxx
})

然后就可以开发了
Proxy

项目开始前，跟后台要接口地址

在开发环境中配置代理。

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      // 将所有已 /api 开头的请求都进行代理

      // localhost:8080/api/lessons -> xxxx:3000/xxx/lessons
      '/api': {
        target: '开发环境接口',
        ws: true,
        changeOrigin: true,
        // 假如说 后台接口没有公共前缀，我们就需要使用pathrewrite
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
}

配置后，我们就可以在开发的过程中，直接使用 “/api/xxx” 作为接口地址，这个地址会去请求 “localhost:8080/api/xxx” 8080会代理到后台地址

开发完成后，我们需要生产环境的代理操作，生产环境中，需要在nginx中进行代理。

location /api {
  proxy_pass http://localhost:3000;
  rewrite "^/api/(.*)$" /$1 break; 
}