配置proxy代理解决跨域问题

相信不少同学在开发过程中，都遇到过跨域问题，我也百度过很多文章，解决的办法层出不穷，有配置后端Nginx、后端文件添加请求头等等。

本文将会教会大家利用配置proxy代理，解决跨域问题。

在webpack 或 vite 里修改配置文件，就是那个带有config的文件。

这里使用的vite, 所以是修改的 vite.config.js , webpack 是 webpack.config.js

打开后是这样的：

```import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()]

  }

})```

我们在下面添加配置：

```

server:{

    proxy: {

      '/test': {    #检测到 /test 开头的url就会拦截

        target: 'http://123.57.249.44',    #将这段拼接到拦截的url上

        changeOrigin: true,    #是否改变请求源和目标源保持一致

        //rewrite: (path) => path.replace(/^\/test/, '')    #把test去掉

      }

    }```

配置好后就可以在本地访问api接口了，我们可以测试一下。

在服务器上编写一个测试用PHP文件，

辉常简单的一段代码： 

    echo: 'hhhhhhhhh';

?>

访问这个接口会返回hhhhhhh，此外没有任何东西，Nginx也没有添加任何修改。

此时用axios访问可以返回结果，没有跨域问题：

没有跨域问题