vue-element-admin之链接本地域名接口并解决跨域问题

最新推荐文章于 2023-07-19 15:28:53 发布

原创最新推荐文章于 2023-07-19 15:28:53 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍如何在Vue项目中配置跨域访问。包括在.env.development中设置VUE_APP_BASE_API和VUE_CLI_BABEL_TRANSPILE_MODULES，在vue.config.js中配置代理，以及后端路由配置来允许跨域请求。

参考
https://blog.youkuaiyun.com/HKer_YM/article/details/104282106

步骤

1    .env.development  中  

VUE_APP_BASE_API = ''   
VUE_CLI_BABEL_TRANSPILE_MODULES = true


2  vue.config.js 中

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://www.tp5.com/index.php/',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        },
      },
    },


3  后端

Route::group(function () {


	Route::post('v1/login','democrm/Login/index');


})->allowCrossDomain([
    'Access-Control-Allow-Headers' => 'token,Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With,accesstoken',
    'Access-Control-Allow-Origin' => '*'		// 解决跨域
]);

测试，访问，是不是发现url还是本地的，不过没事已经请求成功，原因是因为我们使用了代理，转发