2021-02-26

最新推荐文章于 2024-07-08 10:53:15 发布

热爱°可抵岁月漫长

最新推荐文章于 2024-07-08 10:53:15 发布

阅读量65

点赞数

本文链接：https://blog.csdn.net/weixin_46337813/article/details/114149374

版权

一、什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。
源指协议，端口，域名。只要这个3个中有一个不同就是跨域。

列子：
#协议跨域
http://a.abc.com访问https://a.abc.com；
#端口跨域
http://a.abc.com:8080访问http://a.abc.com:80；
#域名跨域
http://a.abc.com访问http://b.abc.com；

二、本地开发解决跨域方法

在 vue.config.js 中配置devServer

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  lintOnSave: process.env.NODE_ENV !== 'production',
  devServer: { //跨域
    port: "8080", //端口号
    host: "localhost",
    open: true, //配置自动启动浏览器
    proxy: { // 配置跨域处理 可以设置多个
      '/api': {
        target: 'http://a.abc.com:8081',//跨域请求头信息
        changeOrigin: true,
        ws: false,
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {
          '^/api': '/'
        }
         //pathRewrite: {'^/api': '/'} 重写之后url为 http://a.abc.com:8081/xxxx
         //pathRewrite: {'^/api': '/api'} 重写之后url为 http://a.abc.com:8081/api/xxxx
      }
    }
  }

请求http://localhost:8080/api/v2就会被代理到http://a.abc.com:8081/v2

（注意请求后必须添加api否认不会被代理。可以设置 axios 的 baseURL 值
axios.defaults.baseURL = ‘/api’
这样会为所有的请求url 前面都加上 ‘/api’，方便做统一代理。）

或者以下写法 process.env.VUE_APP_BASE_API做代理：不用担心以上的问题

 devServer: {
        host: '0.0.0.0',
        port: port,
        open: true,
        proxy: {
            // detail: https://cli.vuejs.org/config/#devserver-proxy
            [process.env.VUE_APP_BASE_API]: {
                target: `http://47.115.9.235:9999/`,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        },
        disableHostCheck: true
    },