axios 跨域问题_前端跨域产生的原因和解决方法

axios 跨域问题_前端跨域产生的原因和解决方法首先,经典报错:No‘Access-Control-Allow-Origin’解决方法:一、配置main.js此处已经默认请求都添加/api为前缀importVuefrom’vue’importAppfrom’./App.vue’importrouterfrom’./router’importaxiosfrom’axios’import’font-awesome/css/font-awesome.min.css’Vue.config.product

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

首先,经典报错:No ‘Access-Control-Allow-Origin’

解决方法:

一、配置main.js

此处已经默认请求都添加/api为前缀

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import axios from 'axios'
import 'font-awesome/css/font-awesome.min.css'

Vue.config.productionTip = false

axios.defaults.baseURL='/api/'
Vue.prototype.$axios = axios


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 二、配置config.index.js

也就是在proxyTable中写上目标地址,主要是已经重写过/api了,之后的axios请求中都不需要再添加/api,也就是

pathRewrite: {

          “^/api”:”

        }

不需要写作下面这样, 会重复导致报错。

pathRewrite: {

          “^/api”:“/api”

        }

正确的index.js代码:

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { // 配置代理,下面是个例子
      '/api': {
        target: 'http://localhost:8880',
        changeOrigin: true,
        ws:true,
        pathRewrite: {
          "^/api":''
        }
      }
    },
 
    // host: 'localhost', // can be overwritten by process.env.HOST
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 3000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,  
    useEslint: true,
 
    showEslintErrorsInOverlay: false,
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
   // assetsPublicPath: '/',
    assetsPublicPath: './', // 生产环境打包后静态文件路径修改为相对路径
    /**
     * Source Maps
     */

   // productionSourceMap: true,
    productionSourceMap: process.env.env_config !== 'prod', // 生产环境不需要sourceMap,测试阶段可为true
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report || true
  }
}

三、写请求:get请求为例

axios.get('/student',{//你想访问的资源
  params:{
    name:"邹xx"//因为后端使用findbyname函数
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(error){
  console.log(error);
});

四、顺手又写出404

404 Not Found
请求失败,请求所希望得到的资源未被在服务器上发现

axios 跨域问题_前端跨域产生的原因和解决方法

 没有这个路径,

@RestController

public class Studentcontroller {

    @Autowired
    StudentService studentService;

    @RequestMapping("/deletestudent")
    public void deletebyID(){
//        Optional<StudentEntity> byId = studentRepository.findById(13869L);
//        byId.orElse(null);
//        StudentEntity studentEntity = new StudentEntity();
//        studentEntity.setName("xxb");
//        studentRepository.save(studentEntity);
    }

    @GetMapping("/{name}")
    public StudentEntity findByName(@PathVariable("name") String name){
        return studentService.findByName(name);
    }

查看自己的路径,就是服务器端的问题

GetMapping 注解已经默认封装了@RequestMapping

使用postman测试

数据库中此人确实存在:

axios 跨域问题_前端跨域产生的原因和解决方法

参数理解:

@GetMapping(value = "/service", params = "serviceName=CREATE_PROJECT")

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194900.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 【ML】支持向量机(SVM)从入门到放弃再到掌握

    【ML】支持向量机(SVM)从入门到放弃再到掌握朋友,你通过各种不同的途经初次接触支持向量机(SVM)的时候,是不是会觉得这个东西耳熟能详,感觉大家都会,却唯独自己很难理解?每一次你的老板或者同仁让你讲解SVM的时候,你觉得你看过这么多资料,使用过这么多次,讲解应该没有问题,但偏偏在分享的时候结结巴巴,漏洞百出?每一次机器学习相关的面试在问到支持向量机(SVM)的时候,尽管你觉得你都准备好了,可是一次又一次败下阵来,以至于觉得问那些问题…

  • ping traceroute原理

    ping traceroute原理ping命令工作原理ping命令主要是用于检测网络的连通性。Ping命令发送一个ICMP请求报文给目的IP,然后目的IP回复一个ICMP报文。原理:网络上的机器都有唯一确定的IP地址,我们给目标IP地址发送一个数据包,对方就要返回一个同样大小的数据包,根据返回的数据包我们可以确定目标主机的存在,可以初步判断目标主机的操作系统等。因为ping命令是使用ICMP协议,…

  • 自定义 QTreeView

    自定义 QTreeView自定义QTreeView交替行的背景色可以使用下面样式代码来定义:QTreeView{alternate-background-color:yellow;}123123当鼠标划过item时,如果要提供一个特殊的背景色,可以使用 ::item 辅助控制,例如:QTreeView{show-decoration-selected:1;}

  • 图片怎么存储到数据库里「建议收藏」

    我们存储图片到数据库里一般有两种方式将图片保存的路径存储到数据库(文件路径或者ftp路径)将图片以二进制数据流的形式直接写入数据库字段中(base64)FTP:FTP服务器(FileTransferProtocolServer)是在互联网上提供文件存储和访问服务的计算机,它们依照FTP协议提供服务。FTP是FileTransferProtocol(文件传输协议)。顾名思义,就是专门用来传输文件的协议。简单地说,支持FTP协议的服务器就是FTP服务器。关于图片或者文件在数据库.

  • sha1给出了三种新的sha版本_开发版和稳定版哪个好

    sha1给出了三种新的sha版本_开发版和稳定版哪个好在进行百度地图等地图开发时,需要申请一个SHA1,方法流程如下:1.找到文件debug.keystore所在位置,一般在C盘的.android目录下。2.使用jdk自带的keytool工具。3.进入win+r输入cmd进入cmd窗口,进入debug.keystore所在目录,使用keytool工具,示例:C:\Users\SYY\.android>D:\SYYData\.download\IDEA-C\jdks\bin\keytool-list-v-keystoredebug.keys

  • 零基础学Java(6)控制流程

    零基础学Java(6)控制流程控制流程与任何程序设计语言一样,Java使用条件语句和循环结构确定控制流程。块作用域我们首先要了解块(block)的概念。块是指由若干条Java语句组成的语句,并用一对大括号括起来。块确定了变

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号