跨域问题

跨域问题

1. vue中可以设置代理，来解决跨域.

　　问题1:第一次打包，报错，请求不到

　　解决：在vue.config.js中设置相对路径 publicPath:’./’

 

　　问题2:第二次打包，页面显示不出来图片

　　解决：如果后端不做重定向的话，那么要路由改为hash

 

　　问题3:第三次打包，报错，因为代理只在开发阶段生效

　　解决：做开发环境和生产环境的配置

　　　　.env.development(开发环境)

　　　　//页面标题

　　　　VUE_APP_TITLE=小鹿线入学管理系统

　　　　//开发环境配置

　　　　ENV = 'development'

　　　　//小鹿线入学管理/开发环境

　　　　VUE_APP_BASE_API='http://不好/api'

 

　　.env.production（生产环境）

　　//页面标题

　　VUE_APP_TITLE=小鹿线入学管理系统

　　//开发环境配置

　　ENV = 'production'

　　//小鹿线入学管理/开发环境

　　VUE_APP_BASE_API='http:localhost:3000'

vue.config.js(设置跨域)

                    let path = require("path");

                    module.exports = {

                        publicPath:'./',

                        //代理

                        devServer: {

                          proxy: {

                            '/api': {

                              target: "process.env.VUE_APP_BASE_API",

                              changeOrigin: true,

                              pathRewrite: {

                                '^/api': '/api'

                              }

                            }

                          },

                        },

                    /*@的路径*/

                        configureWebpack: (config) => {

                            config.resolve = { 

                                extensions: ['.js', '.json', '.vue'],

                                alias: {

                                    '@': path.resolve(__dirname, './src'),

                                }

                            }

                        }

                    }

2. 后端设置跨域(cors)

3. jsonp