前端解决跨域-配置代理

一、什么是跨域？ 是指在浏览器中，一个网站的脚本或文档试图访问另一个网站的资源时，由于同源策略的限制，如果三个方面之一存在差异： 协议、域名（主域名、子域名）、端口。则会被视为不同的域，从而触发跨域限制。这种限制是浏览器施加的安全措施，旨在保护用户隐私和数据安全。

二、什么是代理 代理是webpack提供给我们的，常说的代理其实就是一个代理服务器，如A服务器访问B服务器，我们可以通过代理C服务器帮助A服务器请求，产生的跨域原因是因为浏览器的同源策略针对于ajax的请求，并不限制服务器之间的通信传输，而这个代理服务器正好和我们相同端口和域名，我只需用代理服务器去发请求再去接收，从而达到代理的作用。

三、如何配置代理（以vue为例）

vue.config.js文件

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  lintOnSave: true,
  // proxy配置
  devServer: {
    open: true,
    host: 'localhost',
    port: '8080',
    https: false,
    overlay: {
      warnings: true,
      errors: true
    },
    proxy: {
      '/services/c1': {
        'target': 'https://xxx.xxx.com/', // 目标服务器（服务端真实的服务器地址）
        'changeOrigin': true,
        'pathRewrite': {
          '^/api': ''
        }
      }
    }
  }
}

我前端本地起的服务是localhost:8080,如果network请求接口也是通过这个域名和端口请求就代表代理配置成功了。