解决跨域的方式

最新推荐文章于 2024-10-18 15:58:53 发布

哦豁*

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量321

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62351236/article/details/122238611

版权

在根目录下新建vue.config.js文件

写上

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                // http://www.sirfang.com/build/ajax_get_list这是完整路径,将com/后的路径重写路径为api
			// 1 目标路径 这里相当于公共的地址
            target: "http://www.sirfang.com",
            port: 8080,// 1.1端口号 默认的可以不配
            open: true,// 1.2运行项目自启
            //2 允许跨域
            changOrigin: true,
            //3 重写路径
            pathRewrite: {
                '^/api': ''
            }
        }
    }
}
}

在页面使用重要的事说三遍重启重启重启服务!!

页面中使用

<script>
export default {
  data() {
    return {};
  },
  methods: {
    getList() {
     this.$axios({
       method: 'POST',
       url: 'api/build/ajax_get_list',//api别名替代了http://www.sirfang.com/,发起请求就是我们本地发起的
       }).then((res) => {
   console.log(res)
 })
},
},
  watch: {},
  computed: {},
  components: {},
  created() {
    // this.$store.dispatch("methodName");
    this.getList();
  },
};
</script>