vue cli配置代理解决跨域问题

news2024/12/24 21:58:00

跨域问题
是由于违背了同源策略，同源策略规定了协议名、主机名、端口号必须一致
我们目前所处的位置是http localhost 8080，我们想向一台服务器发送请求，它的位置是http localhost 5000，我们的ajax请求从浏览器发送到服务器，服务器收到了这次请求并把数据交给了浏览器，但由于违背了同源策略，浏览器不会让我们进一步拿到数据

解决跨域问题
1.cors
在服务器中添加特殊的响应头
2.jsonp
利用了script标签的src属性，在引入外部资源的时候不受同源策略的限制
（真实开发用的不多，只能解决get请求的跨域问题）
3.配置一个代理服务器
在这里插入图片描述
借助vue cli可以开启一个代理服务器
⚠️：代理服务器的端口号也是8080，以后我们发送请求的时候端口号写8080即可

vue cli配置代理
在vue.config.js中添加如下配置：

//  解决版本更新缓存问题  文件后面加时间戳
const Timestamp = new Date().getTime();
module.exports = {
  publicPath:'/',
  configureWebpack: {
    devtool: 'source-map',
    output: {
      filename: `js/[name].${Timestamp}.js`,
      chunkFilename: `js/[name].${Timestamp}.js`
    },
  },
  css: {
    extract: {
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`,
    }
  },
  productionSourceMap: false, // 打包时不生产.map文件
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:5000',
        changeOrigin: true,//用于控制请求头中的host值
        ws: false,
        //真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径
        pathRewrite: {
          '^/api1': ''
        }
      }
    }
  }
}