背景：フロントエンドでvueを使用して構築された別のプロジェクトと、バックエンドでspringbootを使用して構築された別のプロジェクト。同じマシンでローカルにデバッグする場合は、フロントエンドプロジェクトとバックエンドプロジェクトを開始する必要があります。Vueはポート9527を開始し、springbootはポート8083を開始します。これにより、クロスドメインの問題とクロスドメインのCookie送信の問題が発生します。
発生する問題：1。異なるローカルポートを接続する方法は？2.クロスドメインの問題を解決するにはどうすればよいですか？3.クロスドメインによって引き起こされるCookieの損失の問題を解決するにはどうすればよいですか？
1.異なるローカルポートを接続する方法は？
フロントエンドが9527などのポートを開始した後、バックエンドは8083などの別のポートを開始します
フロントエンドプロジェクトvueで使用されるaxiosを使用し、フロントエンドでバックエンドインターフェイスのbaseUrlを設定すると、フロントエンドとバックエンドを接続できます。
const service = axios.create({
baseURL: 'http://127.0.0.1:8083'
})2.クロスドメインの問題を解決するにはどうすればよいですか？
最初のポイント：クロスドメイン問題のバックエンドソリューション。次のコードは簡単に解決できます:(バックエンドでクロスドメインの問題を解決するには4つの方法があります。これが最も簡単な方法です。他の方法については、https：//blog.csdn.net/Mint6/articleを参照してください。 / details / 104726325）
/**
* @Auther: Administrator
* @Date: 2020/2/23 22:09
* @Description:
*/
@Configuration
public class WebMvcConfg implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
//设置允许跨域的路径
registry.addMapping("/**")
//设置允许跨域请求的域名
//当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
.allowedOrigins("http://localhost:9527")
//是否允许证书 不再默认开启
.allowCredentials(true)
//设置允许的方法
.allowedMethods("*")
//跨域允许时间
.maxAge(3600);
}
}
3.クロスドメインによって引き起こされるCookieの損失の問題を解決するにはどうすればよいですか？
最初に2番目の質問のバックエンドコードを変更します。allowedOrigins（ "http：// localhost：9527"）ここに*を書き込むことはできません。フロントエンドの実際のhttp：// ip：port番号を入力する必要があります。事業
第二に、内withCredentials：フロントエンドコード変更axiosに設定axios基本設定の最初のステップであり、真の
const service = axios.create({
baseURL: 'http://127.0.0.1:8083',
withCredentials: true
})さて、これまでのところ、フロントエンドとバックエンドの分離プロジェクトのローカル共同デバッグは問題ありません。