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)
blank

相关推荐

  • qt中Qtcpserver服务端_qt websocket

    qt中Qtcpserver服务端_qt websocket0.前言本文主要讲解QtTCP相关接口的基本应用,一些实践相关的后面会单独写。TCP协议是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP通过检验和、序列号、确认应答、重发控制、连接管理以及窗口控制等机制实现可靠性传输。TCP通过三次握手来建立可靠的连接。TCP四次挥手断开连接。TCP连接是双向的,在四次挥手中,前两次挥手用于断开一个方向的连接,后两次挥手用于断开另一方向的连接。TCP知识参考:https://blog.csdn.net/sinat_36

  • J2ME开发视频下载

    J2ME开发视频下载最近在学习J2ME开发方面的内容,下面这些视频下载地址是我通过Orbit下载工具,收集整理出来,已证明可下载。你只须将这些下载地址复制到Orbit或迅雷中,就可以批量下载这些视频教学!http://images.enet.com.cn/eschool/j2me/16-3.swfhttp://images.enet.com.cn/eschool/j2me/24-1.swf…

  • 加密狗android,Android系统加密狗的设计与实现

    加密狗android,Android系统加密狗的设计与实现摘要:随着IT产业的迅猛发展,软件作为IT产业中的一项重要产品,现在已经随着电脑进入千家万户,深入到用户生活中的每个地方。但是针对软件,有一个问题一直存在,那就是软件盗版的问题。随着软件影响范围的扩大,盗版软件带来的危害也是越发的严重。另外,智能手机也已经进入一个高速发展期,Android系统手机在智能手机市场中占据很大的一块份额。在这样的背景下,本文提出一种使用Android系统手机对软件进行…

  • 软件工程期末考试题库(超全)[通俗易懂]

    软件工程期末考试题库(超全)[通俗易懂]软件工程期末考试题库选择题具有风险分析的软件生命周期模型是(  C   )。A.瀑布模型      B.喷泉模型  C.螺旋模型        D.增量模型软件工程的基本要素包括方法、工具和(A)。A. 过程        B. 软件系统   C. 硬件环境         D. 人员软件的复杂性是( A),它引起人员通信困难、开发费用超支、开发时间超时等问题。A. 固有的         B. 人为的   C. 可消除的         D. 不可降低的在结

  • pycharm中的设置setting「建议收藏」

    pycharm中的设置setting「建议收藏」pycharm中的设置setting打开Setting选项中的Editor编辑器打开font字体在里面就可以选择你喜欢的字体了编写PythonScript使用$来编写文件头部说明的信息8137654)]

  • JavaSE学习随笔(一) Cloneable接口源码分析与技术细节

    JavaSE学习随笔(一) Cloneable接口源码分析与技术细节Cloneable接口是Java开发中常用的一个接口,它的作用是使一个类的实例能够将自身拷贝到另一个新的实例中,注意,这里所说的“拷贝”拷的是对象实例,而不是类的定义,进一步说,拷贝的是一个类的实例中各字段的值。本博文将从Cloneable接口的源码入手,对其技术细节和使用方法进行详细的介绍。

    2022年10月10日

发表回复

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

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