vue$http 의 get 과 post 요청 크로스 도 메 인 문제 해결

vue$http 의 get 과 post 요청 크로스 필드 문제
우선 config/index.js 에 proxy Table 을 설정 합 니 다.

 proxyTable: {
      '/api':{
          // target:'http://jsonplaceholder.typicode.com',
          target:'http://localhost:9080',
          changeOrigin:true,

           pathRewrite:{
               '/api':''
           }
      }

사용자 이름과 비밀번호 로 로그 인 한 폼 제출

methods: {
// get  
            //  submitForm() {
            //      var formData=JSON.stringify(this.ruleForm);
            //      this.$http.get('/api/amdatashift/login/probe').then(function(data){

            //      }).catch(function(){
            //          console.log("     ");
            //  });
            //  }
  //post  
             submitForm() {
                 var formData=JSON.stringify(this.ruleForm);
                 this.$http.post('/api/amdatashift/login/user',{

                     username:this.ruleForm.username,
                     password:this.ruleForm.password
                 },{
                            emulateJSON:true
                        }).then(function(data){
                      console.log(data); 
                 }).catch(function(){
                     console.log("     ");
             });
             }
      }

주의해 야 할 것 은:
1.{emulateJSON:true}을 설정 해 야 합 니 다.그렇지 않 으 면 도 메 인 을 넘 지 못 합 니 다.
2.크로스 도 메 인 은 chrome 브 라 우 저 에서 보 았 습 니까?http://localhost:8080(즉,서버 가 사용 하 는 주소 가 아 닌 vue 주 소 를 시작 하 는 것 입 니 다.)그 러 니 놀 라 지 마 세 요.사실은 도 메 인 을 뛰 어 넘 는 데 성 공 했 습 니 다.
3.http 요청 에/api 를 가 져 가 야 합 니 다.index.js 프 록 시 를 통 해/api 를 제거 합 니 다.브 라 우 저의 방문 주 소 는?http://localhost:8080/api/amdatashift/login/user그리고 실제 방문 주 소 는?http://localhost:9080/amdatashift/login/user。대 리 를 통 해 크로스 도 메 인 접근 을 실현 하 였 습 니 다.
vue el-uproad 업로드 컨트롤 은 도 메 인 문제 post 요청 이 get 요청 으로 바 뀌 었 습 니 다.
최근 vue 에 올 라 온 것 은 elmentui 의 el-uproad 컨트롤 을 사용 한 것 으로,결과적으로 줄곧 나방 이 나 왔 으 니,여러분 들 은 구 덩이 를 적 게 걷 기 를 바 랍 니 다.
캡 처 코드 는 커 녕
1。컨트롤 옮 기기 액 션 주소 바 꾸 기

설정 이 완료 되면 직접 테스트 합 니 다.emmm.......................................................

크로스 도 메 인 문 제 를 제 시 했 습 니 다.이것 은 제 가 본 컴퓨터 개발 전단 서비스 와 백 엔 드 서비스 포트 가 다 르 기 때문에 이해 할 수 있 습 니 다.
자 료 를 찾 고 vue 크로스 도 메 인 문제 해결 방안 을 말 한 다음 에 대 리 를 엽 니 다.

vue 프로젝트 의 config 에 있 는 index.js 파일 을 찾 아 그림 과 같은 것 을 추가 합 니 다.change Origin 은 true 입 니 다.대체http://192.158.111.101:8000。예:원래 주소http://localhost:8000/ssmShow/upload'현재 주소'/api/ssmsmShow/upload'.
그래서 업로드 컨트롤 은:

테스트emmmm。。。또 틀 렸 어.


도 메 인 을 잘못 보고 하고 두 번 이나 요 구 했 습 니 다.그리고 요청 에 문제 가 있 습 니 다.
파일 업 로드 는 post 요청 일 것 입 니 다.결국 이 get 에서 options 요청 을 했 습 니 다.어리석다.302 의 상 태 는 바 뀌 지 않 을 것 이다.먼저 뒤에 있 는 500 의 잘못 을 보고 해라.
options 의 요청 은 인터넷 에 그의 설명 과 처리 방법 이 있 습 니 다.
필터 추가.

동시에 웹.xml 는 다음 과 같이 추가 해 야 합 니 다.

변경 후 자바 백 스테이지 다시 시작,emmm 테스트...다음 과 같다.



이번 에는 세 번 의 인 터 페 이 스 를 호출 했다.내 가 갈 게.그러나 좋 은 상황 은 options 요청 이 올 바 르 게 되 돌 아 왔 습 니 다.options 요청 이 올 바 르 기 때문에 세 번 째 요청 을 했 습 니 다.
세 번 째 부탁 을 자세히 보 니 get 요청 이 군요.첨부 파일 업로드 가 왜 get 요청 이 야?
인터넷 에서 오랫동안 찾 았 는데,모두 가 말 하 는 엘-uproad 라 는 컨트롤 에 문제 가 있다.action 을 사용 할 수 없습니다.그래서 인터넷 방법 에 따라 action 에 가짜 주 소 를 추가 하고 컨트롤 의 before-uproad 갈고리 함수 에 직접 손 을 댔 습 니 다.
직접 이 안에 axios 의 post 요청 으로 파일 을 제출 합 니 다.

계속 테스트

세 번 째 업로드 요청 은 get 요청 입 니 다.문제 가 있 습 니 다.el-uproad 의 action 에 문제 가 있 으 면 post 요청 을 직접 호출 하면 get 요청 이 됩 니 다.그리고 한참 찾 았 습 니 다.한 형의 주 의 를 받 아 알 았 다.
js 나 vue 에서 오류 가 발생 하면 post 요청 이 get 요청 으로 변 할 수 있 습 니 다.그리고 제 잘못 을 찾 았 습 니 다.그게 제 주소 입 니 다.

너 는 화가 나 지 않 는 다 고 말 했 는데,뜻밖에도 이곳 에 평행봉 이 없어 졌 을 뿐 이 고,게다가 후 테스트 까지 하 다 니.

다 나 았 습 니 다.요청 은 하나 뿐 입 니 다.post 입 니까?post 입 니까?파일 도 올 렸 습 니까?힘 들 었 지만 즐 거 웠 습 니 다.
내 그림 에 표 시 된 주 소 를 주의 하 세 요.이 안의 포트 는 8080 이 고 api 문자 도 있 습 니 다.이것 은 나의 배경 진정한 주소 가 아 닙 니 다.이것 은 대리 주소 입 니 다.그 는 대 리 를 통 해 나의 실제 주 소 를 방문 할 수 있 습 니 다.그래서 형 들 은 포트 가 틀 리 거나 주소 경로 가 틀 리 면 잘못 되 었 다 고 생각 하지 마 세 요.이것 은 옳 은 것 입 니 다.
이상 은 개인 적 인 경험 이 므 로 여러분 에 게 참고 가 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.