SpringBoot + Vue 中前后端分离的跨域问题解决

针对后端使用8080和前端使用8080端口进行冲突的解决。

完整项目见：SpringBoot_Vue

后端

后端我们可以在application.properties中将端口改成8082。

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/ssm?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=123456

server.port=8082

mybatis-plus.config-location=classpath:/mybatis-config.xml
mybatis-plus.mapper-locations=classpath:/cn/edu/shu/xj/ser/mapper/*.xml

前端

1 搭建vue项目

假设已经安装好node.js，vue，npm，webpack。在前端中配置后端的8082端口。
1.新建vue项目

2.vue项目生成命令是vue init webpack my-project

3.一路确认即可

4.安装完成后，基本目录如下：

2.修改跨域

1.在config/index.js文件中两处修改
原始：

修改后：

module.exports = {
  dev: {

    env: require('./dev.env'),
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //new 跨域
    proxyTable: {
      '/': {
        target: 'http://localhost:8082',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }
    },

2.在build/webpack.dev.conf.js中如下修改
原始：

修改后：

 devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    //   {
    //   rewrites: [
    //     { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
    //   ],
    // },

这样就OK了！

3.语法检查

vue中有个语法检查报错，在build/webpack.base.conf.js的43行，注释掉即可：